Many times in my coding projects, I incorporate floated elements. Everything usually goes smoothly until Internet Explorer 7 decides to throw a wrench in the works. For instance, take a look at this code:
HTML
<div id="container">
<div id="element-1" class="left">
Some content
</div>
<div id="element-2" class="right">
Some much longer, more intricate content
</div>
<div class="clear"></div>
</div>
CSS
.left {
display:block;
float:left;
}
.right {
display:block;
float:right;
}
.clear {
clear:both;
visibility:hidden;
}
In certain cases, IE7 will inexplicably bump #element-2 onto a new line. This issue arises from IE7 failing to determine the width of the floated elements based on their content and assuming that one (or both) of them has the same width as the container div. To quickly resolve this problem, I typically assign a specific width to that element for IE7.
This glitch is rather sporadic since it doesn't occur every time I use floated elements, but it does happen quite frequently. It appears to be more prevalent when utilizing multiple floats consecutively, like so:
HTML
<div id="container">
<div id="element-1" class="left">
Some content
</div>
<div id="element-2" class="right">
<div class="left">
Some much longer, more complicated content
</div>
<div class="right">
Even more content
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
CSS
The same styling applies here as well.
Is there an improved method to prompt IE to correctly identify the widths of the floated elements?