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:
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 ;}