Make the outer div automatically the same as its floating content

Question

I want an external div that is black to wrap its div floating inside of it. I do not want to use style='height: 200px in the div with the outerdiv , as I want it to automatically increase its content (e.g. floating div s).

 <div id='outerdiv' style='border: 1px solid black;background-color: black;'> <div style='width=300px;border: red 1px dashed;float: left;'> <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> </div> <div style='width=300px;border: red 1px dashed;float: right;'> <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p> </div> 

How to do it?

Answer 1

You can set outerdiv CSS for this

 #outerdiv { overflow: hidden; /* make sure this doesn't cause unexpected behaviour */ } 

You can also do this by adding an element at the end with clear: both . This can usually be added using JS (not a good solution) or with the pseudo-element :after CSS (not widely supported in older IEs).

The problem is that the containers will not naturally expand to include floating children. Be careful using the first example, if you have any children outside the parent, they will be hidden. You can also use “auto” as the property value, but this will cause scroll bars if any item appears outside.

You can also try floating the parent container, but depending on your design, this may not be possible / difficult.

Answer 2

First, I highly recommend that you style CSS in an external CSS file rather than make it inline. It is much easier to maintain and can be more reusable using classes.

Responding to the answer of Alex (& Garret clearfix) to “adding an element at the end using clear: both”, you can do it like this:

  <div id='outerdiv' style='border: 1px solid black; background-color: black;'> <div style='width: 300px; border: red 1px dashed; float: left;'> <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> </div> <div style='width: 300px; border: red 1px dashed; float: right;'> <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p> </div> <div style='clear:both;'></div> </div> 

This works (but as you can see, inline CSS is not so good).

Answer 3

You can try self-closing floats as described at http://www.sitepoint.com/simple-clearing-of-floats/

So try either overflow: auto (usually works) or overflow: hidden , as alex said.

Answer 4

I know some people hate me, but I found display:table-cell to help in this case.

It is really cleaner.

Answer 5

First of all, you do not use width=300px for the attribute parameter for the tag, not for CSS, use width: 300px; .

I would suggest applying the clearfix method on #outerdiv . Clearfix is a general solution for cleaning 2 floating divs, so the parent div will expand to accommodate 2 floating divs.

 <div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'> <div style='width:300px; float: left;'> <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> </div> <div style='width:300px; float: left;'> <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p> </div> </div> 

Here is an example of your situation and what Clearfix does to resolve it.

Answer 6

Use jQuery:

Set parent height = child offset Height.

 $(document).ready(function() { $(parent).css("height", $(child).attr("offsetHeight")); } 

Answer 7

Use clear: both;

I spent more than a week trying to figure it out!