Could look at the following page in IE 7.
http://www.youngamericangrowers.com/...der_search.asp

I used the following style to clear the div after each plant listing.

.basement:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

This worked for IE6, firefox and on mac browsers. When IE 7 came out it messes this page up bigtime. Several people on the web suggested to add this line in addition to the above class but it does not work for me.

.basement{display: inline-block;}

Anyone have any ideas, suggestions?

You need to put your clearing immediately after your last floated object (in this case, the right floated div on each row).

Also...you don't need to specify position: relative. It's not doing anything in this case.

Adam,

No dice...if I interpreted your suggestion correctly this is what i did
new code:

<div>
<div style="float:right;width:353px;position:relative;" >
html code...
</div>
<div class="basement"></div>
</div>
<br>
<hr>

old code:
<div>
<div style="float:right;width:353px;position:relative;" >
html code...
</div>
</div>
<div class="basement"></div>
<br>
<hr>

any other ideas?

see next post

I found a workaround for my particular problem. I am a newb to css so I don't know if this will be frowned upon.

I added my basement class (clear fix) to the containing div in addition to having the basement directly after the div. The code goes something like this.

<div class="basement">
<div>image...</div>
<div>plant html code....</div>
</div>
<div class="basement"></div>

Actually, that's not quite what I had in mind. I'll code it for you and maybe you'll see it better.

<div>
<left floated div></div>
<right floated div></div>
<clearing div></div>
</div>

You don't actually need the containing div itself...I just like it because it organizes code a bit better for my own eyes.