aligning multiple divs - left, center and right
My website looks like this:
[left div][ center div ][right div]
[ ][right div]
[ ]
[ ]
[ ]
[ ]
If I try to add another div to the left it looks like this:
[left div]
开发者_StackOverflow[ ]
[left div][ center div ][right div]
[ ][ ][right div]
[ ][ ]
My css:
#left{
width: 140px;
height: auto;
float: left;
clear: left;
}
#center{
float: left;
width:600px;
padding: 10px;
}
#right {
float: right;
height: auto;
width: 140px;
}
How can I make it look like this
[left div][ center div ][right div]
[ ][ ][right div]
[left div][ ]
[ ][ ]
[ ][ ]
[left div][ ]
you can use something like the following:
html
<div id="wrapper">
<div class="left"></div><div class="center"></div><div class="right"></div>
<div class="left"></div> <div class="right"></div>
</div>
css
#wrapper {width:886px; overflow:hidden}
.left {float:left; width:140px; height:200px; background:red;border:1px solid black;}
.right {float:right;width:140px; height:200px; background:blue;border:1px solid black;}
.center {float:left;width:600px; height:200px; background:grey;border:1px solid black;}
live example: http://jsbin.com/eroka5/2
To explain the idea: You can't use "clear:left" for the div:left here, because it will make a new line between 2 "left" div.
I think that your best bet is to create the "wrapper": left-wrapper, center-wrapper, and right-wrapper (the same to left,right & center above). Then you can put child-div into "left-wrapper", 100% width, without floating stuff.
Here is my sample code that achieves this goal.
<html>
<head>
<style>
#left,#center,#right{
width:33%;
float:left;
}
#bottomleft,#bottomright
{
width:50%;
float:left;
}
</style>
</head>
<body>
<div width="1024px">
<div id="left">left</div><div id="center">center</div><div id="right">right</div>
<div>
<div>
<div id="bottomLeft" >bottomleft</div> <div id="bottomright">bottomright</div>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论