div common HTML Page Layout code

Single 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 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-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" > This 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 of </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 are reference fragments: <div id= "center" class= "column" > <h1>this is the main content.</h1> </div> <div id= " Left ' class= ' column > <h2>this is the left sidebar.</h2> </div> <div id= ' right ' class= ' column ' > <h2>this is the right sidebar.</h2> </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 row </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>  </P> <P></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 row </div> <div id= "warp" > <div id= "column" > <div id= "Column1" > This is the first column </div> <div id= "Column2" > This is the second column </div> <div class= "clear" ></div> </div > <div id= "Column3" > here 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;}