ansaurus

Question

Answer 1

+1 A:

You need to use the clear-fix. Insert the following after your floated div, and within the containing div.

<div class="clear"></div>

And add the following style:

.clear { clear:both; }

Example:

<div class="container">
  <div class="floatedDiv">Hello World</div>
  <div class="clear"></div>
</div>

Jonathan Sampson 2009-06-21 03:49:03

Thanks Jonathan:This worked great!

PF1 2009-06-21 04:08:42

Answer 2

+1 A:

(The third time today :-) ) give the outer div overflow: hidden;
and width.

Itay Moav 2009-06-21 03:49:55

Really? So sorry about that, truly. I think I have to work on changing my search queries to better express what other people call the same problem.

PF1 2009-06-21 04:04:51

... or auto

rpflo 2009-06-21 04:14:14

Adding a width to an element in order to make sure it grows in height makes CSS code hard to read, I doubt if that is a sensible solution. The zoom:1 solution seems better I guess but it will probably not be valid w3c css. The overflow: hidden also a nice solution but makes your css also hard to read because it is not about the overflow to hide content but used also to let the element grow in size.

Michiel 2009-06-21 17:57:03

Answer 3

+3 A:

If you don't want to add additional markup to your html or add a width to your outer div, you can use:

#div1 {
    overflow:hidden;   /* clears float for most browsers */
    zoom:1;            /* clears float for IE6           */
    }

Emily 2009-06-21 11:45:12

I thought overflow: hidden worked in IE6 too ?

alex 2009-06-21 11:49:04

Nope. To clear floats for IE6 you need to invoke hasLayout. That is done by giving the element a position, float, display, width, height, or zoom. Giving width or height is the most common way to invoke hasLayout but sometimes you don't want to specify a dimension and zoom is the most transparent. See hasLayout.net for more information.

Emily 2009-06-21 12:07:38

Ah - I add display: block to generally everything that contains floated elements.

alex 2009-06-21 23:32:51

Answer 4

+1 A:

Maybe handy to note that there is also the well know clearfix code from positioniseverything that is written specifically for this problem and is probably most robust and easiest to apply in any situation. The CSS looks as follows:

<style>
div.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
div.clearfix { display: inline-block; margin: 0 0 8px 0; }
/* Hides from IE-mac \*/
* html div.clearfix { height: 1%; }
div.clearfix { display: block; }
/* End hide from IE-mac */
</style>

In order to use it in your situation you would do the following:

<body>
<div id="div1" class="clearfix" >Inner Div:
<div id="div2">Testing long content.</div>
</div>
</body>

Michiel 2009-06-21 17:47:18

Answer 5

A:

While the solutions above should work, I figure it's worth pointing out that there's one magical trick I haven't seen considered yet (in this thread).

Just float #div1 left. When you float the parent element, it'll automagically clear the child element - fairly useful, really. You could build an entire layout of floated stacks, and then have one final clear at the end, and it'd be fairly reliable.

Ryan McGrath 2009-06-22 08:26:18

ansaurus

tags:

views:

answers:

Float Creates Overlapping Divs

related questions