After spending some time experimenting, I decided to seek help here. I am currently working on a website design with a simple layout - a header and two columns each with their own scrollbars. To achieve this setup, the columns need to have absolute positioning with specific top and bottom values set, which unfortunately takes them out of the normal document flow and causes them not to be pushed down by the header column.
If anyone has any ideas on how to accomplish this using just CSS, I would greatly appreciate it. It seems like such a straightforward task!
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>