Question

Very straightforward CSS question that I haven’t been able to find the answer to so far:

I’m trying to lay out a page with two div’s side-by-side in one row (using float:left; and float:right;) and then one div below them. The problem is that if the top row (defined as a div itself) is so wide that the space between the two divs can accomodate the bottom div, the bottom div moves up into the top row creating the appearance of a single row of three divs. I don’t know if that’s clear or not, but here’s the code:

<div id="top div" style="width:400px;">
<div style="float:left;"><img src="images/xlab.jpg" width="100px" height="200px" /></div>
<div style="float:right;"><img src="images/ucbseal.jpg" width="100px" height="250px" /></div>
</div>

<div id="bottom div"><img src="images/xlab.jpg" width="200px" height="200px" /></div>

So, as above, since the top div has a 200px gap in between its left and right child elements, the image in the bottom div slides up between them. If I make the top div’s width 399px that doesn’t happen. I tried using the CSS “clear” property but that didn’t solve the problem. I’ve always just worked my way around this seemingly-odd behavior in a sloppy way but want to find a better practice.

Any help or direction is greatly appreciated!

Answer 1

Use overflow:auto on the first div

<div id="top div" style="width:400px;overflow:auto;">
<div style="float:left;"><img src="images/xlab.jpg" width="100px" height="200px" /></div>
<div style="float:right;"><img src="images/ucbseal.jpg" width="100px" height="250px" /></div>
</div>

<div id="bottom div"><img src="images/xlab.jpg" width="200px" height="200px" /></div>

it will cause the container div to expand to the contents of its children and so the following div will maintain its location..