CSS Float causes layout to break
If you copy the following HTML: http://pastebin.com/zBkzGysw into a text editor and test in a browser you will see that the yellow box has 开发者_StackOverflowa massive height! This is because it has a class of clearfix and is clearing itself from the sidebar on the left hand side.
How can I stop this from happening?
I have tried using overflow:hidden; on the Middle column but that means if I have a table which has long content it will be cut off! Also why when doing this does using margin-left add margin on the right hand side?
Try applying display: inline-block; on your Middle div:
.Middle
{
margin-left: 220px;
display: inline-block;
}
You may also need to specify a width to it as well to get the layout you're after.
Update:
I've found a way to get the layout behaviour I think you're after, but I've done it by stripping out the clearfix styles. Is this any closer?
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
body
{
margin:0;
padding:0;
}
.MainContent
{
margin: 20px;
width:200px;
}
.Middle
{
margin-left: 220px;
margin-top: -300px;
vertical-align: top;
float: left;
}
*/
</style>
</head>
<body>
<div class="MainContent clearfix">
<div style="width:200px;float:left;">
<div style="height:300px;background:blue;"></div>
</div>
<div class="Middle">
<div style="padding:20px;background:red;">
<div style="padding:10px;background:yellow;margin-bottom:20px;height:20px;">
<div style="float:left;height:20px;width:300px;background:green;"></div>
<div style="float:right;height:20px;width:300px;background:green;"></div>
</div>
<table style="border:#000 1px solid;">
<tr>
<td>ioruturiotueorit eiortueriotuoeotigggggggggggggggggggggggggggggggggggggggggggggggggggggggieruter tiouriotueroutoerutiuerteorituero tuioerutioeriotueroutoeruto eroturoetuoerutqe;ruqe; rty80yuto;eqotouyt4uyity 4iltyilytilryterutyertuyertuyert erut uerytierutyerutylerytelryltylert qerytuiertyileqrtyuqet</td>
<td>ioruturiotueorit eiortueriotuoeotiieruter tiouriotueroutoerutiuerteorituero tuioerutioeriotueroutoeruto eroturoeteeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeuoerutqe;ruqe; rty80yuto;eqotouyt4uyity 4iltyilytilryterutyertuyertuyert erut uerytierutyerutylerytelryltylert qerytuiertyileqrtyuqet</td>
<td>ioruturiotueorit eiortueriotuoeotiieruter tiouriotueroutoerutiuerteorituero tuioerutioeriotueroutoeruto eroturoetuoerutqe;ruqe; rty80yuto;eqotouyt4uyity 4iltyilytilryterutyertuyertuyert erut uerytierutyerutylerytelryltylert qerytuiertyileqrtyuqet</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论