Div Float Issue: It seems that divs automatically clear:left

I have a series of images, all of which hav开发者_运维问答e width:400px, but have varying heights. They are in the following container:

#content {width:808px;margin:0 auto;margin-top:100px}

All the ODD images have the following code:

{float:left;clear:left;margin:2px}

All the EVEN images have the following code:

{float:right;clear:right;margin:2px}

In theory shouldn't every ODD image be on the left, stacked ontop of each other and every EVEN image should be on the right stacked on top of each other.

Instead I get this:

It's as though some of the images on the right are clear:left or clear:both, right?

Any thoughts?

Thanks

take, for example, this code:

<div>Airplane</div>
<div style="float: left;">Symba</div><div style="float:right;">Chewbacca(?)</div>

you wouldn't expect the top of Chewbacca(?) to line up with the top of Airplane! it will line up with the top of Symba.

Symba has float: left, so is forced below the Airplane. whether Airplane happens to be floating or not doesn't matter anymore.

I've seen layouts that do what you want, by applying float:left to ALL the elements, and then using some Javascript to tidy up the white space once the page is done loading (float: left on its own won't do it, as you may have already noticed). I don't like that solution myself, but the only other alternative I can think of is to pre-sort the images in to two columns, and split them accordingly:

<div style="float:left">
 <div>Myst(?)</div>
 <div>Airplane</div>
 <div>Symba</div>
</div>
<div style="float:right">
 <div>Coastline</div>
 <div>Painter</div>
 <div>Chewbacca(?)</div>
</div>

but if you want the columns to always be equal height, that may not work for you, unless you know the heights of the images in advance, and can put things into columns based on that. (loop over, keeping a tally of the current height, and always adding to the shorter column; something like that.)