CSS/HTML Shadow problem

Answer 1

100% shadow height has no height to count 100% from so it uses auto mode. So so far I see 3 ways to fix problem and none of them are nice as it should be:

• Setting fixed height on parent div (bad if content extends)
• Use 3x3 table (but once again people say not to use tables for layout)
• Use double sided shadow background image to fill content div. 1px height 974px width bg image with repeat-y; (not very elegant if site width changes)

Answer 2

There's a much simpler way to do this. Make a new background image 960px wide by 10px high that has your shadow at either side of it. (You may need to tweak the width to get 920px of white in the middle with the shadows down the sides)

Use your #shadow div to add that background around #content eg:

#shadow
{
width: 960px;
margin-left: auto;
margin-right: auto;
background: url(shadow-sides.png) repeat-y left top;
}

Alternatively you can probably make your #content div stretch down by adding min-height: 100%; to it and an IE6 hack:

* html #content { height: 100%; }

Answer 3

id say that your HTML is wrong. Its bad practice to have self closing div's

wrap them around your content and use negative margin's and background positions to get the right effect that spans the height of the fluid content

this is a bit sudo, as it ripped from another site of mine, but ti should give you the basic of how it should be done

<div id="header">
<div class="wrapper">
<div class="inner">
...
</div>
</div>
</div>


    #header {
height:100%;
background:transparent url(../img/left-gradient.png) repeat-y scroll left center;
margin:0 auto;
max-width:60em;
min-width:40em;
padding-left:7px;
text-align:left;
width:60em;
}

#header .wrapper {
background:transparent url(../img/right-gradient.png) repeat-y scroll right center;
padding-right:7px;
}

#header .inner {
background-color:#FFFFFF;
}