Div CSS常用レイアウト方式コード集錦

ここでは、Div CSSレイアウトについて説明します.ここでは、2行1列、3行1列、2行2列、3行2列、2行3列、1行3列、floatロケーションのコード集錦など、よく使われるDivCSSレイアウトコードを集めて整理します.
CSS 1行1列レイアウトコード:

body{margin:0px;padding:0px;text-align:center;}
#content{margin-left:auto;margin-right:auto;width:400px;width:350px;}

CSS 2行1列レイアウトコード:

body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;width:350px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;width:350px;}

CSS三行一列レイアウトコード:

body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;width:320px;}
#content-mid{margin-left:auto;margin-right:auto;width:400px;width:320px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;width:320px;}

Div CSS 3行2列レイアウト:

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

2行2列レイアウト:

#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:270px;}
#bodycenter#dv2{float:right;width:350px;}

1行2列レイアウト:

#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:410px;}

単一行三列は絶対位置決めCSSコードを採用する:

#left{position:absolute;top:0px;left:0px;width:120px;}
#middle{margin:20px190px20px190px;}
#right{position:absolute;top:0px;right:0px;width:120px;}

単一行三列はfloat配置のCSSコードを採用する:

<style>
#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;}
<style>
<divid="warp"> 
<divid="column"> 
<divid="column1">   </div> 
<divid="column2">   </div> 
<divclass="clear"></div> 
</div> 
<divid="column3">   </div> 
<divclass="clear"></div> 
</div>

2行3列の完全なコード:

<style>
#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;}
</style>
<divid="header">   </div> 
<divid="warp"> 
<divid="column"> 
<divid="column1">   </div> 
<divid="column2">   </div> 
<divclass="clear"></div> 
</div> 
<divid="column3">   </div> 
<divclass="clear"></div>

3行3列レイアウト、CSSとHTMLコードは以下の通りです.

<style>
#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;}
</style>
<!--       CSS  -->
<divid="header">   </div> 
<divid="warp"> 
<divid="column"> 
<divid="column1">   </div> 
<divid="column2">   </div> 
<divclass="clear"></div> 
</div> 
<divid="column3">   </div> 
<divclass="clear"></div> 
</div> 
<divid="footer">   </div>

以下に示すコードではmargin,padding,boederなどの属性は設定されておらず、使用時に状況を見て自分で定義することができます.