Expand div to contain floats

[lateatnight]

I'm having a problem with some nested DIV tags not displaying properly.

Everything is nested inside a few container DIVs. My problem is the #magcolumn div. If I use a float (left or right) it pushes #magcolumn and #magfront outside of the #magcontainer DIV. If I use display: block, everything stays inside the container, but #magcolumn gets pushed down below #magfront, instead of floating to the right.

The CSS in question:

#magcontainer {width:760px; margin:0 auto; margin-bottom:30px; background:#FFF; border:1px solid #857550;}

#magcontent {width:740px; margin:0 auto; text-align:left; background:#FFF; border:1px dotted #0C6;}

#magfront {display:block; float:left; width:500px; margin:0 auto; text-align:left; background:#FFF; border:1px dotted #990000;}

#magcolumn {float:right; width:210px; border: 2px solid #7B8650; background:#DADEC9; margin-left:20px;}

The HTML is:
<div id="container">
<div id="magcontainer">
<div id="magcontent">
<p class="maghead">THIS IS A HEADLINE</p>
<p class="maghead2">And this is a subhead</p>
<div id="magfront">Vestibulum sit amet imperdiet justo. Maecenas ligula ipsum, rhoncus ac suscipit et, rutrum et sem. Quisque ut augue nulla, ut scelerisque risus. Donec ante justo, dignissim auctor lobortis at, sollicitudin quis felis. Curabitur nisi justo, porta non dapibus et, commodo non augue. Fusce non semper nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam pretium sem accumsan erat pulvinar semper et ut sem. Aliquam malesuada tortor at magna vehicula sodales. </div>
<div id="magcolumn">
<p class="columnhead">COLUMN</p>
<p class="magcolumn">Lorem ipsum, mare nostrum per adua ad astra, saviter ad lucum. Integer vel dui dolor. Integer eu libero sit amet urna sollicitudin viverra. Quisque in tortor dui. Sed at nunc ac arcu faucibus tempus at in leo. </p>
</div>
</div>
</div>
</div>

[edited by: alt131 at 5:12 am (utc) on Dec 11, 2011]
[edit reason] Thread tidy [/edit]

[birdbrain]

Hi there lateatnight,

add overflow:hidden; to your #magcontainer attributes. ;)

Further reading:-

• Clearing floats [google.com]
  

birdbrain

[lateatnight]

Thanks very much, birdbrain! (And apologies to alt131 for posting links).

But I notice that the two side-by-side DIVs (#magfront and #magcolumn) are now sitting outside their container (#magcontent). How do I get them to stay inside?

The more important thing was to get #magfront and #magcolumn positioned right, but #magcontent has a margin-bottom of 30px that is affecting the layout (#magfront and #magcolumn are sitting just below #magcontent).

[alt131]

Hi lateatnight, no troubles and I've changed the title to better reflect the issue too. Floats seem to come up a lot for you :) so useful to have some background information.

Recall elements that are floated are removed from the document flow. 9.5 Floats [w3.org]

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist.

That means the parent - div#magcontent is drawn as if the floated elements do not exist, so it is only drawn to a height that will contain the non-floated child elements (.maghead and .maghead2). Put another way, the parent (div#magcontent) of floated elements does not expand to contain them.

I'm emphasising this because you've said that the floated elements are "outside" the parents. Saying it that way puts attention on the floats, when the real issue is the behaviour of the parent. However, also recall the parents are behaving correctly (although not as desired).

There are several ways to approach this depending on browser/versions you are supporting and how much you want to change the code. Paul usually has lots of suggestions about coding for "column" type layouts, so I'll leave those to him.

The overflow method suggested by birdbrain relies on this: (Same section as above)

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself.

So, setting overflow makes the parent element establish a new block formatting context, and that requires it to "expand" until it "contains" the floats. However, in this case the overflow has been applied to div#magcontainer which is the grandparent of the floats, and that's not quite what was desired. Set it on the parent div#content if you want that to expand instead.

[lateatnight]

Beautiful! Works perfectly now, thank you.