Home/ Questions/Q 208287
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T17:48:42+00:00

I have a problem with my site. I want that the shadow stops at

  • 0

I have a problem with my site. I want that the shadow stops at the end of my textbox.

ShadowProblem

HTML

<body>
<div id="shadow" class="floatfix">

<div id="shadowleft"></div>
<div id="shadowtop"><img src="img/shadowcornerleft.png" alt="hoek" id="shadowcornerleft" /><img src="img/shadowcornerright.png" alt="hoek" id="shadowcornerright" /></div>
<div id="shadowright"></div>
<div id="content">

This is my CSS code:

#shadow
{
margin-left: auto;
margin-right: auto;
margin-top: 75px;
width: 974px;
}

#shadowleft
{
position: absolute;
height: 100%;
width: 27px;
margin-top: 42px;
background-image: url("img/shadowleft.png");
background-position: top left;
background-repeat: repeat-y;
}

#shadowright
{
position: absolute;
height: 100%;
width: 27px;
margin-top: 12px;
margin-left: 947px;
background-image: url("img/shadowright.png");
background-position: top right;
background-repeat: repeat-y;
}

#shadowtop
{
width: 892px;
height: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 45px;
background-image: url("img/shadowtop.png");
background-position: 0 0;
background-repeat: repeat-x;
}

#shadowcornerleft
{
position: relative;
left: -42px;
top: 0;
}

#shadowcornerright
{
position: relative;
left: 850px;
top: 0;
}

#content
{
width: 920px;
margin-left: auto;
margin-right: auto;
background-color: white;
border-bottom: 1px solid #cccccc;
}

I think that I have this problem because of the “height: 100%”. But I don’t know how to fix it.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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%; }
    • 0