2007-05-31

[Gain] CSS Layout: 2 Columns Without Footer Using Absolute Position

HTML Code:

body
div[header]
div[wrapper]
div[content]
div[rightBar]


CSS Code:

body {
margin: 10px;
}
#header {
width: 100%;
height: 120px;
margin-bottom: 5px;
border: 1px solid #808000;
}
#wrapper {
/* 不設top與left的relative,仍留在原位置 */
/* 作為rightBar絕對放置的根據 */
position: relative;
}
#content {
/* 為rightBar預留空間 */
margin-right: 205px;
height: auto;
min-height: 360px;
_height: 360px;
border: 1px solid #808000;
}
#rightBar {
/* rightBar以絕對放置 */
position: absolute;
top: 0;
right: 0px;
width: 200px;
height: auto;
min-height: 360px;
_height: 360px;
border: 1px solid #808000;
}

沒有留言:

張貼留言