ansaurus

Question

Answer 1

+3 A:

When you float the inner divs, you take them out of the normal document flow, so basically your containing div has no content and no height.

You can solve it by adding a:

overflow: hidden;

to the outer div (just one possible solution).

jeroen 2010-05-22 00:46:16

Jeroen's solution works well. You can also use an empty element such as <br class=clear /> under your inner divs and put clear:both for the clear class in your stylesheet. (if hidden overflow is a problem for your layout)

edl 2010-05-22 00:49:51

@edl, true, but I prefer the overflow solution as `clear:both` tends to clear more than just the containing box.

jeroen 2010-05-22 00:53:08

@jeroen agreed. :) I also prefer the overflow solution. Just depends on the individual application.

edl 2010-05-22 00:57:13

@edl, absolutely, there´s no magic bullet for every situation.

jeroen 2010-05-22 13:46:00

Answer 2

A:

Add style="overflow:hidden;width:100%" to the containing div

I think style="overflow:hidden;" is enough for most browswers, I seem to remember some IE needing the width to be set.

Matt Dotson 2010-05-22 00:46:29

Only when in quirksmode and you don't want to have that.

BalusC 2010-05-22 00:49:11

@BalusC, no, in IE6 (all modes) the element needs to get *layout* to contain its floats. Setting a `width` will do that, though I prefer `zoom: 1`. In IE7, `overflow` already gives the element layout.

mercator 2010-05-22 00:59:55

@mercator: Oh, I forgot that IE6 ever existed. But yes, you're right :)

BalusC 2010-05-22 01:12:44

ansaurus

tags:

views:

answers:

DIV tags not being properly nested.

related questions