nice drop shadows - too short for window - CSS forum at WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

nice drop shadows - too short for window

- but won't expand with content if height set to 100%

Josefu

3:10 am on Feb 8, 2007 (gmt 0)

I'm having a 4a.m. headscratcher here. I've got this lovely div/css layout that looks like a page floating above another - effect obtained by a "drop shadow" background filling a vertical line to each side of the middle content - that looks great as long as the content stretches past the screen hight. On some pages it stops short, and that just looks silly.

I've tried the "100% high <body>" with a 100% hight div, but this just fixes the div height to the screen - it will no longer expand with the content.

Is there any sort of simple solution here? Am I overlooking something obvious?

Thank you for any help.

mihai2u

3:56 am on Feb 11, 2007 (gmt 0)

Are you using any floated elements, without clearing them at the end? This might not let the box to fully expand..

BTW, a good way to clear elements.. better than <div class="clear">&nbsp</div> ... is <br class="clear" />
and the css for it ..
br.clear {height:0;line-height:0;font-size:0;clear:both;}

Nice and simple, right?

Hope I helped,
Mehigh

Josefu

6:33 pm on Feb 20, 2007 (gmt 0)

Sorry for my belated reply!

Thanks for the tip, but that's not quite my problem... I needed the div to both expand to the height of the window (if shorter) and expand with the content within (if longer). After reading around, this seems to be one of those "holy grails" of css design. I cheated - I made a centred y-repeating horizontal band "drop shadow" background.

Now I'd like to make the footer a) stick to the bottom of the page if the content is too short yet b) stay below the content if it is longer than the window height. Same problem all over it seems!