CSS / HTML Shadow should stop at the end of the textbox
I have a problem with my site. I want the shadow to stop at the end of my text box.
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 I have this problem because of "height: 100%". But I don't know how to fix this.
source to share
There's a much easier way to do this. Make a new background image 960px wide by 10px wide that has your shadow on either side of it. (You may need to adjust the width to get 920px white in the middle with shadows on the sides)
Use your #shadow
div to add this background around #content
for example:
#shadow
{
width: 960px;
margin-left: auto;
margin-right: auto;
background: url(shadow-sides.png) repeat-y left top;
}
Alternatively you can make the #content
div stretch by adding min-height: 100%;
to it and hacking IE6:
* html #content { height: 100%; }
source to share
The 100% height of the shadow has no height to compute 100%, so it uses auto mode. So, so far, I see 3 ways to fix the problem, and none of them are as pleasant as they should be:
- Setting a fixed height on the parent div (bad if the content continues)
- Use a 3x3 table (but again people say not to use tables for layout)
- Use a double sided shadow background image to fill the div content. 1px height 974px width bg image with repeat-y; (not very elegant if the site width changes)
source to share
id says your HTML is wrong. Its bad practice is to close the div div
wrap them around your content and use negative margins and background positions to get the correct effect that spans the height of the fluid content
it's a bit sudo as it ripped from another site of mine, but ti should give you basic details on how this 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;
}
source to share