Div content is pulled to whitespace

Contents in a 100% height div is causing trouble

[pihe]

I have a three (well, five to be exact) column layout, where the first column from the left contains divs and menus, submenus inside them. The columns are placed inside a wrapper, where min-height and height is set to 100%. All other columns are also set to 100% height. The problem is, the menu items are pulled to nowhere at the bottom of the page and it gets worst by resizing the window. You may check it at [dev.publicart.hu...] -- please enlighten me! I'm sure it's a tiny mistake but I can't see what I miss. Thank you in advance (and sorry for my strange English).


Relevant part of the CSS:

html, body { background-color:#363635; height: 100%; text-align:center;}

#wrapper { min-height: 100%; height: auto !important; height: 100%; margin: auto; width: 100%; left: 0px; top: 0px; text-align:center; position:relative;}

#leftside { background: url(../images/layout/sides_gradient.jpg) repeat-x; background-color: #7ea2ba; height: 100%; width: 324px; position:absolute; top: 0px; left: 0px;}

#rightside { background: url(../images/layout/sides_gradient.jpg) repeat-x; background-color: #7ea2ba; height: 100%; width: 15px; position:absolute; top: 0px; right: 0px;}

#leftshade { background: url(../images/layout/shade_bcg.jpg) repeat-y; height: 100%; width: 12px; position:absolute; top: 0px; left: 324px;}

#rightshade { background: url(../images/layout/shade_bcg_right.jpg) repeat-y; height: 100%; width: 12px; position:absolute; top: 0px; right: 15px;}

#content {height:100%}

#sidemenu { width: 200px; color: #f5edc2; text-shadow:#2A1F55 2px 2px 2px; position: relative; left: 20px; text-align:left; font-size:16px;}

#subsidemenu { position: relative; left: 50px; width: 150px; }


HTML body:

<div id="wrapper">
<div id="leftside"><img src="images/layout/logo.jpg" height="248" width="324"/>
<div id="sidemenu"> blabla
<div id="subsidemenu" name="subsidemenu" style="display:block"> blablabla </div>
blabla </div>
</div>
<div id="leftshade"></div>
<div id="content">Hello World</div>
<div id="rightshade"></div>
<div id="rightside"></div>
</div>

[milosevic]

Hi Pihe, I've just been looking at this and it doesn't make sense to me.

Why are you using the height:100% rules? It's strange to specify height like this - automatic height should do the job in nearly all situations. Removing this on the #leftside div makes it the correct height.

I would never lay a page out using absolute positioning like this - you're going to get all sorts of headaches - I think this is why you have needed to use the height settings.

I notice you're using CSS3 text shadows, why not use CSS3 drop shadows to completely replace the leftshade and rightshade divs? That would simplify the layout.

Sorry I can't help more, a few ideas that might help though.

[pihe]

Hi Milosevic, thank you for your input and your ideas. Actually, height: auto works as long as the content in the div is fixed but when it gets dynamic (pull down menus) then the problem is the same.

Drop shadow is a brilliant idea, thank you! (Unfortunately IE doesn't support it but I will lay my eyes on IE updates in the future.)

[milosevic]

No problems, have you had any luck fixing it? I'd be interested to hear on progress you made.

Yes, it's a shame about IE, though you can use a filter:

[hypergurl.com...]

If you want to avoid this, another option would be to use an image of the shadow as a right aligned, y-repeated background image (ie a thin vertical strip) inside the left sidebar. If you already have a background image for this div, you could make a small inner div to hold the bg image and float it right inside the sidebar.

Edit - a hack you could use to fix your height woes is the Jquery equal height function - not so bad if you're already using Jquery but it is buggy in my experience if your layout isn't static after the page has loaded.