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. </Div>
<Div id = "right" class = "column">
<H2> This is the right sidebar. </Div>
CSS: ssssssssssssssssss
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;} ssssssssssssssssss
PS: common examples are listed here, not for research purposes. For each box, attributes such as margin, padding, and boeder are not set!