CODEWITHSUNDEEP
cssmargin
Chris
Chris

Reputation: 7853

Margin of inner Div affects outer div

I have three nested DIV elements like this:

<div id="outer">
    <div id="innerA">
        <div id="innerB">
            This<br/>is<br/>a<br/>multiline<br/>testcase.<br/>
            This<br/>is<br/>a<br/>multiline<br/>testcase.<br/>
        </div>
    </div>
</div>

#innerA has a height of 100% which makes it as big as #outer. #innerB's height is left to be auto so it gets as high as its contents. Now when i set #innerB to have margin-top: 10px for example i would expect that #innerB will get a margin in relation to #innerA. What happens instead is that #innerA gets this margin in relation to #outer.

How is this possible? It seems like this has nothing to do with box-sizing at least its not fixable this way.

Here's the CSS:

#outer {
    width: 500px;
    height: 300px;
    background: yellow;
    overflow: auto;
}

#innerA {
    width: 100%;
    height: 100%;    
    background: green;
}

#innerB {
    margin-top: 10px;
    background: blue;
}

and the fiddle:

http://jsfiddle.net/7e2H5/

(Here i would expect that the green DIV fits the yellow one, and that there are 10px of the green one visible above the blue DIV).

Upvotes: 5

Views: 3674

Answers (4)

Stephen Done
Stephen Done

Reputation: 502

According to the Mozilla link provided by Chris, adding floats also prevents margins from collapsing:

Add float: left; to #innerA as shown in this fiddle: http://jsfiddle.net/7e2H5/10/

See: https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing

Upvotes: 0

sureshdeepak
sureshdeepak

Reputation: 43

This is interesting but I wouldn't say that adding padding is a more appropriate answer.

#innerA {
    width: 100%;
    height: 100%;    
    background: green;
    display: inline-block;
}

Here's a demo on JSFiddle.

I hope this helps!

Upvotes: 3

scooterlord
scooterlord

Reputation: 15379

I would replace #innerb margin with #innera padding

Upvotes: 0

Mihey Egoroff
Mihey Egoroff

Reputation: 1542

Seems like it's a "Margin collapsing" problem. Check the DEMO

I've added padding: 1px 0;

More info: https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing

Just found this: margin-top in a nested div

Upvotes: 5

Related Questions