Floats can be tricky. There are three solutions that I use often:
Solution #1 (the same as
matthijs)
Float the containing element
Solution #2
Force the containing element to extend vertically to fit the element
Code: Select all
div {
height: 100%; /* Needed for IE6 */
overflow: hidden;
}
Solution #3
Simply clear the floating at the end of the element (you could use any element, but be careful when using self-closing elements like <br>, as I think they have problems with the CSS 'display' property)
Code: Select all
<div>
<img style="float: right" />
<span class="clear"></span>
</div>
Code: Select all
.clear {
display: block; /* Will save you from a lot of little glitches in both IE and FF */
clear: both;
}
Also, for the min-height route, you could combine Solution #2 with an inner div for the min-height since IE6 doesn't support the min-height CSS property.
Code: Select all
<div>
<div class="minheight"></div>
<img style="float: right" />
</div>
Code: Select all
div {
height: 100%;
overflow: hidden;
}
div .minheight {
width: 1px;
height: 90px;
float: right;
}