Clear float issue
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.
Just clear right on the table, and then clear the nav at the bottom. See updated code below.
<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: right;
}
</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>
<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 style="clear: both;"></div>
</div>
</body>
</html>
Solution here : Block formatting contexts
So if your "content" block is in absolute position, or floating, or displayed inline-block, etc => the clear property of child elements will not be extends outside the "content" block (in your case, extends to your sidebar).
加载中,请稍侯......
精彩评论