PS: Common examples are listed here, not for research purposes. For each box, attributes such as margin, padding, and boeder are not set! 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:
Here is the first column
The second column
The third column
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:
This is the main content.
This is the left sidebar.
This is the right sidebar.
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:
This is the top line
Here is the first column
The second column
The third column
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:
This is the top line
Here is the first column
The second column
The third column
Here is the bottom line
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 ;}
