Forum Moderators: not2easy
could someone possibly explain how it might be possible to get my left menu bar to fill out in height to the same height as the content of my website? I'm using absolute positioning, and have a few nested DIV carefully ensuring similarity in appearance between IE6 and NS6.2 by avoiding the combined width/padding/margins problems.
The problem is that I can't get my left menu bar to fill out the height of the page. Please see the code below: I have presented the barebones exactly as in my site. You can test it by filling the MAIN DIV and the menu list in LEFTBAR with varying amounts of text.
I cannot get the same behaviour in IE6 and NS6.2. I would like the leftbar to fill the page vertically even if the MAIN div has less content. If the MAIN div has lots of content, and forces a scroll bar, I would like the menu bar to fill the entire height to match MAIN. I can't do it! I can even move the leftbar div to above the main div, or even put it
inside MARGIN DIV, or outside. No difference...
I don't understand the behaviour of height: inherit, height: auto and height: 100%. I believe IE has some bugs in its interpretation. What can I do?
Any help much appreciated.
Michael
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
body {margin: 5px; background: #00007f;font-size: 11pt; }
#top {background: #ededed; width:100%; height:100%; }
#margin {margin: 0 0 0 120px; padding: 0 0 0 7px; background: #00007f; color: #ededed;height: 100% }
#title { margin: 0; padding: 0 0 7px 0; border-bottom: 1px solid; }
#title h1 { margin: 0; padding: 0 0 40px 0; }
.leftbar { background: #ededed; color: #000000; width: 120px; position: absolute; left:5px; top: 5px; }
</style>
</head>
<body>
<div id="top">
<div id="margin">
<div id="title"><h1>A big title</h1>A subtitle
</div>
<div class="main">
Content<br>
</div>
</div>
<div class="leftbar">
<div id="picture">Image goes here</div>
Main Menu
<ul>
<li>Menu Item</li>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
body { margin: 5px; background: #0000FF; font-size: 11pt; }
#top { background: #EEEEEE; width: 100%; height: 100%; }
#margin { margin: 0 0 0 120px; padding: 0 0 0 7px; background: #000080; color: #EEEEEE; height: 100%; overflow: visible; }
</style>
</head>
<body>
<div id="top">
<div id="margin">
Content<br> ... [repeat this about 50 times]
</div>
</div>
</body>
</html>
Problem is: In IE6 both columns have the same height (which is more than 100% of the inner window height) whereas in NS7 the height of the grey navbar is the inner window height minus 10 pixels, i.e. it is considerably shorter than in IE6. Also, the dark blue area is higher in IE6 than it is in NS7; not even overflow: visible helps.
IMHO what is supposed to be accomplished here does not seem to be possible with CSS. (At least I couldn't find out how to do it.) I also would be grateful for any idea, because this kind of multi column design is extremely popular, of course.
There is, however, one "fake" way to pull this off: You could load a background image into the body of your page, say 1600 pixels wide and 10 pixels high where the leftmost 120 pixels are grey and the rest blue. Then you could position your layers over this background. Problem: This method does not work if you would like to have a liquid layout where the grey bar has to scale in accordance with character size.
I reckon it's not possible (other than in some browsers but not all).
Michael
