3 Column Div Style
For some we开发者_运维技巧ird reasons I can't get this to work properly (for a 3 Column layout)they are showing as if they are on different lines. -------------------CSS-----------------
.left_content{
float:left;
position:relative;
width:30%;
padding:10px;
margin-right:0px;
margin-left:0px;
border-style:solid;
border-width:2px;
background-image: url(../images/right_divider.gif);
background-repeat: no-repeat;
background-position: left bottom;
}
.center_content{
float:left;
position:relative;
width:40%;
padding:10px;
margin-left:10%;
border-style:solid;
border-width:0px;
background-image: url(../images/right_divider.gif);
background-repeat: no-repeat;
background-position: left bottom;
}
.right_content{
float:right;
position:relative;
width:20%;
padding:10px;
border-style:solid;
border-width:0px;
background-image: url(../images/right_divider.gif);
background-repeat: no-repeat;
background-position: left bottom;
}
---------------html--------------
<div class="left_content">
Nav Left
</div>
<div class="center_content">
main Con<br>main Con<br>main Con<br>main Con<br>main Con<br>main Con<br>main Con<br>
</div>
<div class="right_content">
right Con
</div>
@frank; as you see in your code that the total width of three div's is more then 100%. Reason because padding & border are add width to the div. So, you can use css3 box-sizing property for this. it's stop padding to add width to the div.
css:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
check this example http://jsfiddle.net/wVfeG/
NOTE: IE7 did not support box-sizing property. So, you can remove padding from your div & give margin to it's child.
<body>
<div id="header">
<h1>Header</h1>
</div>
<div id="left">
Port side text...
</div>
<div id="right">
Starboard side text...
</div>
<div id="middle">
Middle column text...
</div>
<div id="footer">
Footer text...
</div>
</body>
And here's the CSS code:
body {
margin: 0px;
padding: 0px;
}
div#header {
clear: both;
height: 50px;
background-color: aqua;
padding: 1px;
}
div#left {
float: left;
width: 150px;
background-color: red;
}
div#right {
float: right;
width: 150px;
background-color: green;
}
div#middle {
padding: 0px 160px 5px 160px;
margin: 0px;
background-color: silver;
}
div#footer {
clear: both;
background-color: yellow;
}
OR Below link for you (http://www.neuroticweb.com/recursos/3-columns-layout/)
You should watch the column-width/column-gap from CSS3 :) http://www.css3.info/preview/multi-column-layout/
If you give
margin-left:10%; then you have to reduce the .center_content class width as 35.
加载中,请稍侯......
精彩评论