Hi all,
After some hours of fiddling I thought I’d try my luck over here. I’m working on a website design which has quite a basic setup, it consists out of a header and two columns, which have their own scrollbars. This requires their position to be absolute, and to have a top value set, and a bottom value of 0px. This ofcourse prevents them from being in the normal document flow, and therefore they cant be pushed down by the header column.
Any ideas on how to achieve this with css only are most welcome, it seems so straightforward!
Best regards, Thijs.
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Testcase</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#header {
background-color: #c8ffff;
}
#lr_container {
position: absolute;
top: 250px;
bottom: 0px;
left: 0px;
right: 0px;
}
#leftcol {
background-color: #ffdcff;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
width: 200px;
overflow-y:scroll;
overflow-x:hidden;
}
#rightcol {
background-color: #ffffd1;
position: absolute;
top: 0px;
left: 200px;
bottom: 0px;
right: 0px;
overflow-y:scroll;
overflow-x:hidden;
}
</style>
</head>
<body>
<div id="header">
variable amount of content, needs to stretch in height and push the pink and yellow kids downwards<br/><br/>!<br/>!<br/><br/>!<br/>!<br/><br/>!<br/>!<br/><br/>!<br/>!
</div>
<div id="lr_container">
<div id="leftcol">
has a fixed width, stretches to the bottom of window<br/><br/>
aa<br/><br/>
aa<br/><br/>
aa<br/><br/>
aa<br/><br/>
aa<br/><br/>
aa<br/><br/>
aa<br/><br/>
aa<br/><br/>
aa<br/><br/>
aa<br/><br/>
aa<br/><br/>
aa<br/><br/>
aa<br/><br/>
aa<br/><br/>
aa<br/><br/>
aa<br/><br/>
aa<br/><br/>
aa<br/><br/>
aa<br/><br/>
</div>
<div id="rightcol">
stretches to the right and stretches to the bottom of window<br/><br/>
bb<br/><br/>
bb<br/><br/>
bb<br/><br/>
bb<br/><br/>
bb<br/><br/>
bb<br/><br/>
bb<br/><br/>
bb<br/><br/>
bb<br/><br/>
bb<br/><br/>
bb<br/><br/>
bb<br/><br/>
bb<br/><br/>
bb<br/><br/>
bb<br/><br/>
bb<br/><br/>
bb<br/><br/>
bb<br/><br/>
bb<br/><br/>
bb<br/><br/>
bb<br/><br/>
bb<br/><br/>
bb<br/><br/>
</div>
</div>
</body>
</html>