Single Row one column
The following is a reference fragment:
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 fragment:
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 fragment:
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 two columns
The following is a reference fragment:
#bodycenter {width:700px;margin-right:auto; margin-left:auto;overflow:auto;}
#bodycenter #dv1 {float:left;width:280px;}
#bodycenter #dv2 {float:right;width:410px;}
Two rows, two columns.
The following is a reference fragment:
#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:410px;}
Three rows, two columns.
The following is a reference fragment:
#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:410px;}
#footer {width:700px; margin-right:auto; margin-left:auto; overflow:auto;}
Single row three columns
Absolute positioning
The following is a reference fragment:
#left {position:absolute; top:0px; left:0px; width:120px;}
#middle {margin:20px 190px 20px 190px;}
#right {position:absolute;top:0px; right:0px; width:120px;}
Float positioning One
Xhtml:
The following is a reference fragment:
<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" > This is the third column </div>
<div class= "Clear" ></div>
</div>
Css:
The following is a reference fragment:
#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 positioning two
Xhtml:
The following is a reference fragment:
<div id= "center" class= "column" >
</div>
<div id= "left" class= "column" >
</div>
<div id= "Right" class= "column" >
</div>
Css:
The following is a reference fragment:
body {margin:0;padding-left:200px;padding-right:190px;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, three columns.
Xhtml:
The following is a reference fragment:
<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" > This is the third column </div>
<div class= "Clear" ></div>
</div>
Css:
The following is a reference fragment:
#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, three columns.
Xhtml:
The following is a reference fragment:
<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" > This is the third column </div>
<div class= "Clear" ></div>
</div>
<div id= "Footer" > here is the bottom line </div>
Css:
The following is a reference fragment:
#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;}
