CODEWITHSUNDEEP
htmlcss
Vinzcent
Vinzcent

Reputation: 1448

CSS/HTML Shadow should stop at end of textbox

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.

Upvotes: 0

Views: 2258

Answers (3)

nickmorss
nickmorss

Reputation: 621

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;
}

Upvotes: 0

roborourke
roborourke

Reputation: 12217

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

Upvotes: 2

Paul G.
Paul G.

Reputation: 464

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)

Upvotes: 0

Related Questions