Question

I’ve had this problem numerous times with even the simplest layouts. It seems that every floated element on my site (in IE 7, IE 8 is fine) drops progressively further down.

Bug: http://img232.imageshack.us/img232/4239/floatdrop.jpg

Basically all I have is a list with 3 items inside an unordered list. (as seen in the screenshot). Various other elements around the site, (such as columns) are broken too. I’ve stripped out absolutely everything, but the problem persists.

What work around can I use to make the site usable in >Ie7.

CSS:

#home #right-column ul {
position: absolute;
width: 100%;
bottom: 0px;
margin-top: 14px;
}
#home #right-column li a {
display: inline;
float: left;
width: 115px;
padding: 3px 5px 3px 5px;
margin-right: 20px;
text-align: center;
color: #ffffff;
background-color: #70cbd2;
} 

Answer 1

Attached screenshot is rendered properly. Since the LIs are not floated, they default to 100% width.

Floating the LIs rather than the As should solve the problem.