DIV with no height problem

Get Started
1

I am trying to create a div on my page that contains two other divs that I want to position side by side (2 columns). The left hand div is fixed in height and the right hand div can have variable height based on its contents. I have tried positioning them with float left and right, or absolutely with respect to the inclosing div, and both work, but both methods result in the enclosing div having no height, so I can’t do things to its background like set the color. How do I get the enclosing div to have height generated for it and yet position its children how I want?

I can post html and css if needed, but I think this is a pretty basic question.
I am using IE 8.

2

You need to add a 3rd div below the other 2 that has a clear:both css attribute.

So it would look like this


<div id="container">
     <div id="floated_div_1"></div>
     <div id="floated_div_2"></div>
     <div class="clearer"></div>
</div>

.clearer {
     clear: both;
}

Using a clearer div isn’t the only way to solve the issue, but it works. You can then position the other two divs however you want.

3

If you want the enclosing DIV to adjust its height according to the inner DIV elements, add “overflow: auto” to its style.
Don’t forget the ‘<!DOCTYPE …’, so it will work fine in IE.

Click here for information about overflow.

4

Quick question about your Div tag and Overflow advice…will it also hold true to form in older versions of IE as well as Safaria and Firefox?

5

According to this page, there should not be any problems at all. The only value not supported by IE is inherit.

6

how can i fully maximize a div height 100% in IE and firefox?!

7

Use a table instead.