3 Column Div Style_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-20 04:28 出处：网络

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

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.