Common Web site layout CSS Instances

Here is a list of commonly used examples, not for research purposes, and for each box, there are no attributes such as Margin,padding,boeder.

single row One column
The following is a reference fragment:
body {margin:0px; padding:0px; text-align:center;}
#content {margin-left:auto; margin-right:auto; width:400px; width:370px;}

two rows and one column
The following is a reference fragment:
body {margin:0px; padding:0px; text-align:center;}
#content-top {margin-left:auto; margin-right:auto; width:400px; width:370px;}
#content-end {margin-left:auto; margin-right:auto; width:400px; width:370px;}

Three rows one column
The following is a reference fragment:
body {margin:0px; padding:0px; text-align:center;}
#content-top {margin-left:auto; margin-right:auto; width:400px; width:370px;}
#content-mid {margin-left:auto; margin-right:auto; width:400px; width:370px;}
#content-end {margin-left:auto; margin-right:auto; width:400px; width:370px;}

single row two columns
The following is a reference fragment:
#bodycenter {width:700px;margin-right:auto; margin-left:auto;overflow:auto;}
#bodycenter #dv1 {float:left;width:280px;}
#bodycenter #dv2 {float:right;width:410px;}

two rows, two columns.
The following is a reference fragment:
#header {width:700px; margin-right:auto;margin-left:auto; overflow:auto;}
#bodycenter {width:700px; margin-right:auto; margin-left:auto; overflow:auto;}
#bodycenter #dv1 {float:left; width:280px;}
#bodycenter #dv2 {float:right;width:410px;}

three rows, two columns
The following is a reference fragment:
#header {width:700px;margin-right:auto; margin-left:auto;}
#bodycenter {width:700px; margin-right:auto; margin-left:auto;}
#bodycenter #dv1 {float:left;width:280px;}
#bodycenter #dv2 {float:right; width:410px;}
#footer {width:700px; margin-right:auto; margin-left:auto; overflow:auto;}

single row three columns
Absolute positioning
The following is a reference fragment:
#left {position:absolute; top:0px; left:0px; width:120px;}
#middle {margin:20px 190px 20px 190px;}
#right {position:absolute;top:0px; right:0px; width:120px;}

float Positioning One
XHTML:
The following is a reference fragment:
<div id= "Warp" >
<div id= "column" >
<div id= "Column1" > here is the first column </div>
<div id= "COlumn2 "> Here is the second column </div>
<div class= "Clear" ></div>
</div>
<div id= "Column3" > This is the third column </div>
<div class= "Clear" ></div>
</div>

CSS:
The following is a reference fragment:
#wrap {width:100%; height:auto;}
#column {float:left; width:60%;}
#column1 {float:left; width:30%;}
#column2 {float:right; width:30%;}
#column3 {float:right; width:40%;}
. clear{Clear:both;}

float Positioning two
Xhtml:
The following is a reference fragment:
<div id= "center" class= "column" >
</div>
<div id= "left" class= "column" >
</div>
<div id= "Right" class= "column" >
</div>

CSS:
The following is a reference fragment:
body {margin:0;padding-left:200px;padding-right:190px;min-width:240px;}
. column {position:relative;float:left;}
#center {width:100%;}
#left {width:180px; Right:240px;margin-left:-100%;}
#right {width:130px;margin-right:-100%;}

Two rows, three columns.
Xhtml:
The following is a reference fragment:
<div id= header > This is the top line. </div> 
<div id= "Warp" > 
<div id= "column" > 
<div  Id= "Column1" > here is the first column </div> 
<div id= "Column2" > This is the second column </div> 
<div  class= "Clear" ></div> 
</div> 
<div id= "Column3" > This is the third column </div > 
<div class= "clear" ></div> 
</div> 

CSS:
The following is a reference fragment:
#header {width:100%; height:auto;}
#wrap {width:100%; height:auto;}
#column {float:left; width:60%;}
#column1 {float:left; width:30%;}
#column2 {float:right; width:30%;}
#column3 {float:right; width:40%;}
. clear{Clear:both;}

Three rows, three columns
xhtml:
The following is a reference fragment:
<div id= "header" > this is the top line </div>
<div id= "Warp" >
<div id= "column" >
<div id= "Column1" > here is the first column </div>
<div id= "Column2" > here is the second column </div>
<div class= "Clear" ></div>
</div>
<div id= "Column3" > This is the third column </div>
<div class= "Clear" ></div>
</div>
<div id= "Footer" > here is the bottom line </div>

CSS:
The following is a reference fragment:
#header {width:100%; height:auto;}
#wrap {width:100%; height:auto;}
#column {float:left; width:60%;}
#column1 {float:left; width:30%;}
#column2 {float:right; width:30%;}
#column3 {float:right; width:40%;}
. clear{Clear:both;}
#footer {width:100%; height:auto;}

PS: Here is a list of common examples, not the use of research, on a single box, there is no set margin,padding,boeder and other attributes!