2007-05-31

[Gain] CSS Layout: 2 Columns Without Footer Using Float

HTML Code:

body
div[header]
div[wrapper]
div[leftBar] // float的div得放在前面,讓下面的div可以頂替上來
div[content]


CSS Code:

body {
margin: 10px;
}
#header {
width: 100%;
height: 120px;
margin-bottom: 5px;
border: 1px solid #808000;
}
#wrapper {
/* 使用float排版時,不用像absolut position那樣需使用relative position */
}
#content {
/* 為leftBar預留空間 */
margin-left: 205px;
height: auto;
min-height: 360px;
_height: 360px;
border: 1px solid #808000;
}
#leftBar {
/* leftBar float到左邊 */
float: left;
width: 200px;
height: auto;
min-height: 360px;
_height: 360px;
border: 1px solid #808000;
}

1 則留言: