CSS практик

Раскладка. Двухколонная

Posted by: fxix on: Октябрь 23, 2008

1. раскладка двухколонная – контент справа.
<div id=»main>
<div class=»wrap»>
<div class=»content»>MIDDLE Content</div>
</div>
<div class=»left»>MIDDLE Left</div>
</div>

#main {
overflow:hidden;
min-width:920px;
max-width:960px;
margin: 0 auto;
}

*html #main { /*для IE*/
width:960px;
}

.wrap {
width:100%;
float:left;
margin-right:-960px;(зачем это непонятно!)
}

.content {
padding-left:-200px;
}

.wrap, .left, .right {
margin-bottom:-32767px;
padding-bottom:32767px;
}

.left {
width:200px;
float:left;
}

2. раскладка двухколонная – контент слева.

HTML

<div id=»middle_02″ class=»bord»>
<div class=»wrap_02″>
<div class=»content_02″>MIDDLE Content</div>
</div>
<div class=»right_02 bordl»>MIDDLE Right</div>
</div>

CSS
/* No */
#middle_02 {overflow:hidden;}
.wrap_02 {width:100%;}
.wrap_02,.left_02,.right_02 {margin-bottom:-32767px;padding-bottom:32767px;}
/* Yes */
#middle_02 {margin:2px auto;min-width:920px;max-width:960px;}
*html #middle_02 {width:960px;}
.wrap_02 {background-color:#fff;float:left;margin-right:-960px;}
.content_02 {padding:0 200px 0 0;}
.right_02 {background:url(left.png) repeat-y #ddd;width:200px;float:right;}
3.  раскладка двухколонная – контент слева. две колонки справа.

HTML

<div id=»middle_03″ class=»bord»>
<div class=»wrap_03″>
<div class=»content_03″>MIDDLE Content</div>
</div>
<div class=»right_03 bordl»>MIDDLE Right</div>
<div class=»left_03 bordl»>MIDDLE Left</div>
</div>

CSS
/* No */
#middle_03 {overflow:hidden;}
.wrap_03 {width:100%;}
.wrap_03,.left_03,.right_03 {margin-bottom:-32767px;padding-bottom:32767px;}
/* Yes */
#middle_03 {margin:2px auto;min-width:920px;max-width:960px;}
*html #middle_03 {width:960px;}
.wrap_03 {background-color:#fff;float:left;margin-right:-402px;}
.content_03 {padding:0 400px 0 0;}
.left_03 {background:url(left.png) repeat-y #eee;width:200px;float:left;}
.right_03 {background:url(left.png) repeat-y #ddd;width:200px;float:right;}

4. раскладка двухколонная – контент справа. две колонки слева.

HTML

<div id=»middle_03″ class=»bord»>
<div class=»wrap_03″>
<div class=»content_03″>MIDDLE Content</div>
</div>
<div class=»right_04 bordr»>MIDDLE Right</div>
<div class=»left_04 bordr»>MIDDLE Left</div>
</div>

CSS
/* No */
#middle_04 {overflow:hidden;}
.wrap_04 {width:100%;}
.wrap_04,.left_04,.right_04 {margin-bottom:-32767px;padding-bottom:32767px;}
/* Yes */
#middle_04 {margin:2px auto;min-width:920px;max-width:960px;}
*html #middle_04 {width:960px;}
.wrap_04 {background-color:#fff;float:left;margin-right:-960px;}
.content_04 {padding:0 0 0 400px;}
.left_04 {background:url(left.png) repeat-y #eee;width:200px;float:left;}
.right_04 {background:url(left.png) repeat-y #ddd;width:200px;float:left;}