nested boxes pushed down by margin-top

Question

Possible Duplicate:
CSS properties being passed up to the parent element when the DIV is empty

I'm a newbie for CSS layout design.

What I'd like to do at the moment is that I want to make two Div boxes, one nested inside one another. Anyway, my problem is the top margin I set to the inner box didn't behave the way I wanted.

Pls take the portion of script below for example:

[demo.html]

<html>
    <header>
        <title>Mock-up page</title>
        <link href="stylesheets/demo.css" rel="stylesheet"  type="text/css">

    </header>
    <body>
        <div id="box1">
            <div id="box2">div 2</div>
        </div>
    </body>
</html>

[demo.css]

#box1{
    width: 300px;
    height: 300px; 
    background-color:#0000FF;       
}

#box2{
    margin-top: 30px;
    background-color:#008000;
}

The effect it produced was it only pushed the outer box 30px down from body tag (left-sided in the picture), which wasn't what I had expected (right-sided in the picture).

enter image description here

What was the reason why this happened and how to correct the styling?

see this: http://stackoverflow.com/questions/2680478/margin-top-push-outer-div-down — vsync, Apr 08 '13 at 14:54

Ricardo Souza · Accepted Answer · 2012-07-08T16:55:07.483

Change the margin-top to padding-top will do what you want.

This is a know issue in many browsers.
When the first child of an element has a margin-top (no content before it) the margin overflow the top of the parent element and pushes it like in your case.

Other solutions exists, but all of them are a bit hacky:

Apply a position: relative to the child and change the margin-top to a margin-bottom and apply top: 20px;;
Create an element before the inner box with some content (  can be used here) with height: 0; and overflow: hidden;;
Set a border-top: 1px solid transparent or the same color of the background of the element (in this case, pay attention that the border is added to the height of the object;
and so on...

score 0 · Answer 2 · answered Jul 08 '12 at 16:29

0

You could add position: relative to #box1 and position: absolute to #box2.

See this example

CSS Positions Explained

answered Jul 08 '12 at 16:29

menislici

1,149
5
18
35

1

Good resource for beginners, but positioning is overkill in this case. – Ricardo Souza Jul 08 '12 at 16:59
@rcdmk yep, you're right – menislici Jul 08 '12 at 17:09

score 0 · Answer 3 · edited May 23 '17 at 12:19

0

CSS

#box1{
    display:block;
    width: 300px;
    height: 300px; 
    background-color:#0000FF;
    border:solid transparent 1px;    
}

#box2{
    margin-top: 30px;
    background-color:#008000;
}

HTML

<div id="box1">
    <div id="box2">div 2</div>
</div>

If you keep the outer box empty (no text node) then it's doing this behavior and to be honest I didn't understand why, but I found it here why it does so and it's known as collapsed margin and I've added border:solid transparent 1px; to soleve the issue but alternatively you can use padding for outer DIV. Here is also an answer on SO.

Demo.

edited May 23 '17 at 12:19

Community

1
1

answered Jul 08 '12 at 16:33

The Alpha

143,660
29
287
307

1

Have in mind that this will increase the measures of the box by the border width for each side (eg.: `height` = `height` + `border-top-width` + `border-bottom-width` and `width` = `width` + `border-left-width` + `border-right-width`) in all major browsers (I think IE 6 and 7 don't) – Ricardo Souza Jul 08 '12 at 17:03
1

I think padding of outer/parent div will be better solution. – The Alpha Jul 08 '12 at 17:05

nested boxes pushed down by margin-top

3 Answers3