Common Layout methods of DIV + CSS

Single Row and one column
The following is a reference clip:
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 clip:
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 clip:
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 and two columns
The following is a reference clip:
# Bodycenter {width: 700px; margin-right: auto; margin-left: auto; overflow: auto ;}
# Bodycenter # dv1 {float: left; width: 280px ;}
# Bodycenter # dv2 {float: right; width: pixel ;}

Two rows and two columns
The following is a reference clip:
# 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: pixel ;}

Three rows and two columns
The following is a reference clip:
# 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: pixel ;}
# Footer {width: 700px; margin-right: auto; margin-left: auto; overflow: auto ;}

Single Row and three columns
Absolute Positioning
The following is a reference clip:
# Left {position: absolute; top: 0px; left: 0px; width: 120px ;}
# Middle {margin: 20px pixel PX 20px pixel PX ;}
# Right {position: absolute; top: 0px; right: 0px; width: 120px ;}

Float positioning 1
XHTML:
The following is a reference clip:
<Div id = "warp"> <div id = "column"> <div id = "column1"> the first column </div> <div id = "column2"> here is the second column </div> <div class = "clear"> </div> <div id = "column3"> here is the third column </div> <div class = "clear"> </div>

CSS:
The following is a reference clip:
# 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 Location 2
Xhtml:
The following is a reference snippet: <div id = "center" class = "column">

CSS:
The following is a reference clip:
Body {margin: 0; padding-left: 200px; padding-right: pixel PX; 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 and three columns
Xhtml: The following is a reference snippet: <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> </P> <p> </div> <div id = "column3"> the third column </div> <div class = "clear"> </div>

CSS:
The following is a reference clip:
# 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 and three columns
Xhtml:
The following is a reference clip: <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 id = "column3"> here is the third column </div> <div class = "clear"> </div> <div id = "footer"> here is the bottom line </div>

CSS:
The following is a reference clip:
# 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 ;}