Examples of common CSS website la s

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"> here is the first column </div>
<Div id = "column2"> here is the second column </div>
<Div class = "clear"> </div>
</Div>
<Div id = "column3"> the third column </div>
<Div class = "clear"> </div>
</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 clip:
<Div id = "center" class = "column">
<H1> This is the main content. </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 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 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>
<Div id = "column3"> the third column </div>
<Div class = "clear"> </div>
</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>
<Div id = "column3"> the third column </div>
<Div class = "clear"> </div>
</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 ;}