0

I have a container div with two child divs.

The fist child is floated to the right. The second child has a top margin.

For some reason the margin on the second child is pulling down the parent container, resulting in the floated element also being pulled down.

Is there a way of making this work without nesting the second child in another div to prevent the pull down?

The elements are dynamic, so I can't just add a negative margin to the sidebar to negate the margin of the other child.

html

<div id="content">
    <div id="sidebar">sidebar</div>
    <div id="messages">
        a message
    </div>
</div>

css

body {
    background-color : red;
}

#content {
    background-color: blue;
}

#sidebar {
    background-color: yellow;
    float: right;
}

#messages {
    background-color: green;
    margin-top : 20px;
}

Fiddle

SystemicPlural
  • 5,629
  • 9
  • 49
  • 74

2 Answers2

1

Give an overflow:hidden to the parent div, ie .content

James
  • 4,540
  • 1
  • 18
  • 34
  • please read the link in comment by onetrickpony. That explains clearly everything – James Mar 22 '14 at 12:28
  • onetrickpony's link explains why the margin is collapsing, but not why overflow hidden remedies it. But now I know what term to search for I found this answer http://stackoverflow.com/questions/9737799/vertical-margins-disappear-when-parent-is-set-to-overflowvisible – SystemicPlural Mar 22 '14 at 12:35
  • 1
    @SystemicPlural `overflow` property - when it has a value other than `visible` - creates a [block formatting context](http://www.w3.org/TR/CSS21/visuren.html#block-formatting) which prevents [collapsing margins](http://www.w3.org/TR/CSS21/box.html#collapsing-margins). [Further](http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/) [info](http://stackoverflow.com/questions/6196725/how-does-the-css-block-formatting-context-work). – Hashem Qolami Mar 22 '14 at 12:35
  • It's worth noting that [a block formatting context is created by one of these](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context). – Hashem Qolami Mar 22 '14 at 12:39
1

Add an invisible space character to the .content

<div id="content">
    &nbsp; <!-- Add this -->
    <div id="sidebar">sidebar</div>
    <div id="messages">
        a message
    </div>
</div>

Is this what you want?

Why it works?

Check the link here: https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing

Parent and first/last child If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

I used an "inline content" to "fix" the problem, in fact you can fix it by using one of the following method:

  • Add border: 1px solid to the .content.
  • Add padding: 1px to the .content.
  • Add inline content (for example the space character)
  • Use a clear:both div
Tony Dinh
  • 6,668
  • 5
  • 39
  • 58