Hi,
I'd like to put two columns on the side of the content div. The part I have problems with is that I want the columns being built from 3 parts. The top and bottom should have fixed heights, but the middle one would adjust depending on the content height. Look at the sample with one column:
<html><head>
<style>
* { border: 1px solid black;}
#contentWrapper { width:450px; }
#leftColumn { width:100px; float: left; }
#leftColumnTop { width:100px; height:50px; background-color: gray; }
#leftColumnMiddle { background-color: red; }
#leftColumnBottom { width: 100px; height:50px; background-color: gray; }
#content { width: 300px; float: left; }
#footer { width: 400px; clear: both; }
</style>
</head>
<body>
<div id="contentWrapper">
<div id="leftColumn">
<div id="leftColumnTop"> </div>
<div id="leftColumnMiddle"> </div>
<div id="leftColumnBottom"> </div>
</div>
<div id="content">content<br>
here<br>more<br>more<br>more<br>more<br>more<br>more<br>
</div>
<div id="footer">footer text</div>
</div>
</body>
</html>
What I want is the #leftColumnBottom stick at the top of the footer and red #leftColumnMiddle to fill the space between top and bottom part.
-
try min-height for the one that needs to grow
Phantom Watson : In case anyone still cares about Internet Explorer 6, min-height isn't supported by it for divs. It appears to be fully supported by the newest versions of all the major browsers, though, so disregard this unless if you're a huge stickler for browser compatibility. -
This works in everything except IE6; for that you'll need a conditional comment and css expression to set a height instead of
bottomon#leftColumnMiddle<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head> <style>* { border: 1px solid black;} #contentWrapper { position: relative; float:left; width: 450px; } #leftColumnTop { position: absolute; width: 100px; height: 50px; left: 0; background-color: gray; } #leftColumnMiddle { position: absolute; width: 100px; top: 50px; bottom: 50px; left: 0; background-color: red; } #leftColumnBottom { position: absolute; width: 100px; height: 50px; left: 0; bottom: 0; background-color: gray; } #content { width: 300px; float: left; margin-left: 100px;} #footer { width: 400px; clear: both; } </style> </head> <body> <div id="contentWrapper"> <div id="leftColumnTop"> </div> <div id="leftColumnMiddle"> </div> <div id="leftColumnBottom"> </div> <div id="content">content<br> here<br>more<br>more<br>more<br>more<br>more<br>more<br> </div> </div> <div id="footer">footer text</div> </body> </html>And to the commenter - it nearly worked, so that's why. ;)
gnud : Just delete the damned answer, then =)ya23 : It seems to do the job, brilliant! Fortunately, I don't have to care about IE6 too much. -
If you need both columns to be of equal height, and work in IE6, you basically have to hack.
A solution I've used in the past involves setting up a fake margin/padding for one of the columns. This assumes that you know a upper limit of how large the columns can grow (could be in the magnitude of several thousand px's).
This solution is outlined here.
Quoting from the page I linked:
The basic method works like this:
- Blocks which will act as columns must be wrapped in a container element
- Apply overflow: hidden to the container element
- Apply padding-bottom: $big_value [2] to the column blocks, where $big_value is a large enough value to guarantee that it's equal to or larger than the tallest column
- Apply margin-bottom: -$big_value to the column blocks
0 comments:
Post a Comment