DIV+CSS Web design Common layout code

One-line column





Body{margin:0px;padding:0px;text-align:center;}


#content {margin-left:auto;margin-right:auto;width:400px;width:370px}





two rows and one column





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 a column





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





#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 of two columns





#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





#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}


//www.qpsh.com





single row three-column absolute positioning





#left {position:absolute;top:0px;left:0px;width:120px;}


#middle {margin:20px190px20px190px}


#right {position:absolute;top:0px;right:0px;width:120px}





float positioning a


XHTML:





<divid= "Warp" ><divid= "column" ><divid= "Column1" > This is the first column </div><divid= "Column2" > This is the second column </div><divclass= "clear" ></div></div><divid= "Column3" > This is the third column </div> <divclass= "Clear" ></div></div>





CSS:





#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 Position two


XHTML:


<divid= "Center" class= "column" ><h1>thisisthemaincontent.</h1></div><divid= "left" class= "column" ><h2>thisistheleftsidebar.</h2></div><divid= "right" class= "column" > <h2>Thisistherightsidebar.</h2></div>





CSS:





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 of three columns


xhtml:<divid= "Header" > this is the top row </div><divid= "Warp" ><divid= "column" ><divid= "Column1" > Here is the first column </div><divid= "Column2" > here is the second column </div><divclass= "clear" ></div></P> <p></div><divid= "Column3" > here is the third column </div><divclass= "clear" ></div></div>





CSS:





#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:


<divid= "Header" > this is the top row </div><divid= "Warp" ><divid= "column" ><divid= "Column1" > This is the first column </div><divid= "Column2" > This is the second column </div><divclass= "clear" ></div></div> <divid= "Column3" > here is the third column </div><divclass= "clear" ></div></div><divid= "Footer" > Here is the bottom line </div>





CSS:





#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;