Web design page Layout css Tips

Http://www.cnblogs.com/sosoft/p/3509977.html

1. Two-Column layout

1.1, left column fixed, right column adaptive
#left {width:190px; float:left;}
#right {margin-left:205px;}

1.2, right column fixed, left column adaptive
#left {float:left; width:100%;}
#right {float:left; margin-left:-100px; width:100px;}

2. Three-column layout

2.1, left and right width fixed, intermediate adaptive
#left {float:left; width:200px;}
#middle {margin:0 210px; }
#right {float:right; width:200px;}



2.2, the middle width fixed, left and right adaptive

This is a bit complicated, it's necessary to post HTML first

<div class= "Wrap" >
<div class= "Left" >
<div class= "Leftwrap" >left left column </div>
</div>
<div class= "Right" >
<div class= "Rightwrap" >right right column http://www.cnblogs.com/sosoft/</div>
</div>
<div class= "center" >Center</div>
</div>

CSS style:

. wrap{position:relative;overflow:hidden;width:100%}
. left{float:left;width:50%;margin-left:-400px;padding-left:200px;}
. Leftwrap{margin-left:200px;background: #aaa;}
. right{float:right;width:50%;margin-right:-400px;padding-right:200px;}
. Rightwrap{margin-right:200px;background: #aaa;}
. Center{position:absolute;left:50%;margin-left:-200px;width:400px;background: #eee;}

3, Upper and lower three lines layout


HTML {height:100%;}
body {height:100%;}

/* If full screen is required, the HTML and body are set height:100%*/

#top {position:absolute; left:10px;top:0px;right:10px;height:50px;}
#main {position:absolute; left:10px;top:60px;bottom:60px;right:10px;overflow:auto;}
#bottom {position:absolute; left:10px; bottom:0px; right:10px; height:50px;} Xi

/*ie6 Down */

#top {*height:50px; *margin-top:-60px; *margin-bottom:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
#main {*height:100%; *margin-left:210px; _margin-left:207px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
#bottom {*height:50px; *margin-top:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}

Web design page Layout css Tips