Page layouts Layout

Web page Common layout has a general column, two columns, three columns now from one column:

Css:

<style type= "Text/css" >

. Container{background: #87cbe5; height:700px;width:500px;/*margin:0px Auto;*/margin-left:auto;margin-right:auto;}

</style>

We all know that a frame is centered margin:0px auto; and Margin-left:auto;margin-right:auto; all can be (you can see the bootstrap framework generally used after the method)

Html:

<div class= "Container" ></div>

Two columns:

Css:

<style type= "Text/css" >

*{margin:0;padding:0;}

html.body{margin:0;height:100%;}
. Container{width:100%;background: #87cbe5; height:700px;/*margin:0px Auto;*/margin-left:auto;margin-right:auto;}
. Container-left{width:20%;background: #b79be7; height:600px;float:left;}
. Container-right{width:80%;background: #ff7d73; height:600px;float:right;}

</style>

Html:

<div class= "Container" >
<div class= "Container-left" ></div>
<div class= "Container-right" ></div>
</div>

Generally from the time of study others told us that inside the frame Container-left and container-right width and is not larger than the outside container frame, it is true! Then we are always careful to obey, But have you ever thought more than it is how to do not dislocation pinch, this time with the Margin-left property can be set to negative value: Container-right to the following

. Container-right{width:85%;background: #ff7d73; height:600px;float:right;margin-left:-5%;}

Three columns: (Margin negative method and self-floating method, absolute positioning method of three methods)

The above two columns lead to this method margin negative method:

<style type= "Text/css" >

/* html,body{margin:0;height:100%;}
. left,.right{position:absolute;top:0px;width:200px;height:100%;}
. Left{left:0;background: #b79be7;}
. Right{right:0;background: #ff7d73;}
. center{margin:0 210px;background: #87cbe5; height:100%;} */
html,body{margin:0;height:100%;}
. Main{width:100%;height:100%;float:left;}
. Main. center{margin:0 210px;background: #87cbe5; height:100%;}
. Left,.right{width:200px;height:100%;float:left;background: #b79be7;}
. Left{margin-left:-100%;}
. Right{margin-left: -200px;}

</style>

<div class= "Main" >
<div class= "center" ></div>
</div>
<div class= "left" ></div>
<div class= "right" ></div>

The second type:

<style type= "Text/css" >

html,body{margin:0;height:100%;}
. left,.right{position:absolute;top:0px;width:200px;height:100%;}
. Left{left:0;background: #b79be7;}
. Right{right:0;background: #ff7d73;}
. center{margin:0 210px;background: #87cbe5; height:100%;}

</style>

<div class= "left" ></div>
<div class= "center" ></div>
<div class= "right" ></div>

The third type:

<style type= "Text/css" >

/* html,body{margin:0;height:100%;}
. left,.right{position:absolute;top:0px;width:200px;height:100%;}
. Left{left:0;background: #b79be7;}
. Right{right:0;background: #ff7d73;}
. center{margin:0 210px;background: #87cbe5; height:100%;} */
html,body{margin:0;height:100%;}
. center{height:100%;margin:0 310px;background: #87cbe5;}
. Left,.right{width:300px;height:100%;background: #b79be7;}
. Left{float:left;}
. Right{float:right;}
</style>

<div class= "left" ></div>
<div class= "right" ></div>
<div class= "center" ></div>

The key is to put the middle in the end

See http://www.zhangxinxu.com/wordpress/?p=370 for details

Page layouts Layout