Clear float issue
- by Jason
I have a page with the standard navigation bar on the left and the content area taking up the rest of the horizontal area to its side. For modern browsers I am using table-row and table-cell values for the display attribute. However, for IE7 I included a conditional stylesheet that tries to float the nav bar.
This works fine except when the content area itself has floated elements and I try to use clear. My goal is to displayed the clear element right after the content area floats but instead it gets shoved down below the nav area.
The following demo code shows this issue. My goal is to get the table to display right below the "leftThing" and "rightThing" but instead there is a large gap between them and the table.
<html>
<head>
<title>Float Test</title>
<style type="text/css">
#body {
background: #cecece;
}
#sidebar {
background: #ababab;
float: left;
width: 200px;
}
#content {
background: #efefef;
margin-left: 215px;
}
#leftThing {
background: #456789;
float: left;
width: 100px;
}
#rightThing {
background: #654321;
float: right;
width: 100px;
}
table {
clear: both;
}
</style>
</head>
<body>
<div id="body">
<div id="sidebar">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div id="content">
<div style="position: realtive;">
<div id="leftThing">
ABCDEF
</div>
<div id="rightThing">
WXYZ
</div>
<table>
<thead>
<th>One</th>
<th>Two</th>
</thead>
<tr>
<td>Jason</td>
<td>45</td>
</tr>
<tr>
<td>Mary</td>
<td>41</td>
</tr>
</table>
<p>Exerci ullamcorper consequat duis ipsum ut nostrud zzril, feugait feugiat duis dolor feugiat commodo, accumsan, duis illum eum molestie luptatum nisl iusto. Commodo minim ullamcorper blandit, nostrud feugiat blandit esse dolore, consequat vulputate augue sit ad. Facilisi feugait luptatum eu minim wisi, facilisis molestie wisi in in amet vero quis.</p>
</div>
</div>
</div>
</body>
</html>
Thank you for your help.
