In IE6, and using divs, how to split entire page into two columns, left div with static width and right with elastic width?
I don't know if what am asking for is even possible in IE6, but开发者_运维问答 here goes: I am working on a page layout and want to split the body into two container divs. I want to give the left div a fixed width of 200px; while making the right div elastic along the page's width. The right div's left border must be touching the left div's right border to make things clearer i made a diagram:
Example on jsfiddle: http://jsfiddle.net/Damien_at_SF/UhdHu/
HTML:
<html>
<body>
<div id="col_1">
<p>column 1</p>
</div>
<div id="col_2">
<p>column 2</p>
</div>
</body>
</html>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
background-color:#000000;
}
#col_1 {
height:100%;
position:absolute;
top:0px;
left:0px;
width:200px;
padding:10px;
background-color:#DBDBDB;
}
#col_2 {
height:100%;
margin-top:0px;
margin-right:0px;
margin-left:220px;
padding:10px;
background-color:#FFFFFF;
overflow:hidden;
}
sourced from: http://css.flepstudio.org/en/css-box-model/1-column-fixed-1-column-fluid.html
hope that helps :)
<html style="height:100%">
<body style="height:100%;margin:0px;">
<div style="position:absolute;left:0;right:0;z-index:1000;height:100%;width:200px;background-color:red;">
Sidebar
</div>
<div style="height:100%;width:100%;">
<div style="padding-left:200px;background-color:blue;height:100%">
Content
</div>
</div>
</body>
</html>
here it is online: http://milkish.com/test/ie6.html check it with netrender: http://ipinfo.info/netrenderer/index.php
加载中,请稍侯......
精彩评论