Div margin not setting properly

Question

I am trying to position text using div, but its not working well!

.background
{
    background-image:url(bg.png);
    width:600px;
    height:500px;
    margin-top:0px;
    margin-left:0px;
}

.head1{
    font-size:18px;
    font-family:calibri;
    font-style:italic;
    color:#d45151;
    margin-top:100px;
    margin-left:100px;

}

.background is the background image of the div whereas .head1 is a text within .background div. You can see it in the html part!

<div class="background">
<div class="head1">There are 3 CRUCIAL things that you need to remember...</div>
<div class="points">
</div>
</div>

The text of class head1 are displayed at positions as they are defined! but it also bring the the background image with it! It seems quiet confusing so I took a screenshot! please check it out! Maybe my css is poorly coded. please help me out.

enter image description here

you could use `padding-top:100px` for background instead of margin top for head1 — Pete, Jan 06 '15 at 12:10
See this post for more details about your problem: http://stackoverflow.com/questions/20544841/margin-of-inner-div-affects-outer-div — Pete, Jan 06 '15 at 12:11

score 0 · Accepted Answer · answered Jan 06 '15 at 12:09

Add overflow: auto to parent div.

.background {
    background: red;
    width:600px;
    height:500px;
    overflow: auto;
}

.head1 {
    font-size:18px;
    font-family:calibri;
    font-style:italic;
    color:#d45151;
    margin-top:100px;
    margin-left:100px;
}

http://jsfiddle.net/L7q5g6yu/2/

Zero margins on .background can be removed, zero margin is default value for divs.

OR

you can remove the inner div, see this code, it makes the same if you need the inner div just to align the text.

<div class="background">
    There are 3 CRUCIAL things that you need to remember...
</div>

<style>
.background {
    background: green;
    width:500px;
    height:400px;
    overflow: auto;
    padding: 100px 0 0 100px;
    color:#d45151; 
    font-style: italic;
}
</style>

http://jsfiddle.net/L7q5g6yu/3/

Thnks that worked! I didnt had any idea about overflow property! :) — user3531660, Jan 06 '15 at 12:15

score 0 · Answer 2 · answered Jan 06 '15 at 12:38

0

Use the following style

.head1 {
font-size:18px;
font-family:calibri;
font-style:italic;
color:#d45151;
padding: 100px 0 0 100px;
}

answered Jan 06 '15 at 12:38

Vignesh Bala

889
6
25

Div margin not setting properly

2 Answers2