10-Day Learning Div+css (Div layout)

A list of layouts:

One column fixed width, one column fixed width centered, one column adaptive width, one column adaptive width center

Fixed width of a column

<style type= "Text/css" >

#layout {height:300px; width:400px; background: #99FFcc;}
</style>

One column fixed width centered

<style type= "Text/css" >

#layout {height:300px; width:400px; background: #99FFcc; margin:auto;}

</style>

A column of adaptive widths

<style type= "Text/css" >

#layout {height:300px; background: #99FFcc;}

</style>

A column of adaptive width centering

<style type= "Text/css" >

body {margin:0px;}
#layout {margin:auto; height:300px; background: #99FFcc; width:80%;}

</style>

Two-Column layout

Two-column adaptive width, two-column fixed-width, one-column fixed-width centering, and float properties.

Two-Column adaptive width

<style type= "Text/css" >
#side {background: #99FF99; height:300px; width:120px; float:left;}
#main {background: #99FFFF; height:300px; width:70%; margin-left:120px;}
</style>

Two-column fixed width

<style type= "Text/css" >
#side {background: #99FF99; height:300px; width:120px; float:left;}
#main {background: #99FFFF; height:300px; width:350px; margin-left:120px;}
</style>

Two-column fixed-width centering

<style type= "Text/css" >
#content {width:470px; margin:0 auto;}
#side {background: #99FF99; height:300px; width:120px; float:left;}
#main {background: #99FFFF; height:300px; width:350px; margin-left:120px;}
</style>

Float Property

<style type= "Text/css" >

body {font-size:18px; line-height:200%;}
#side {float:left;width:202px;}

#main {margin-left:202px;}

</style>

Three-column layout

Three-column adaptive width, three-column fixed-width, three-column fixed-width center,

IE6 3-pixel bug

Three-column adaptive width

<style type= "Text/css" >
body {margin:0;}
#side {background: #99FF99; height:300px; width:120px; float:left;}
#side1 {background: #99FF99; height:300px; width:120px; float:right;}
#main {background: #99FFFF; height:300px; margin:0 120px; }
</style>
Three-column fixed width

<style>
body {margin:0;}
#content {width:470px; margin:0 auto;}
#side {background: #99FF99; height:300px; width:120px; float:left;}
#side1 {background: #99FF99; height:300px; width:120px; float:right;}
#main {background: #99FFFF; height:300px; margin:0 120px; }
</style>

Three-column fixed-width centering

<style>
body {margin:0;}
#content {width:470px; margin:0 auto;}
#side {background: #99FF99; height:300px; width:120px; float:left;}
#side1 {background: #99FF99; height:300px; width:120px; float:right;}
#main {background: #99FFFF; height:300px; margin:0 120px; }
</style>

10-Day Learning Div+css (Div layout)