分享程序员开发的那些事...
更新时间：2022-10-15 08:53:36
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>