CSS - How can I setup a gradient drop shadow?

Question

I have a gradient drop shadow that uses two different images. One on each side. How can I setup my OutsideContainer to be relative to the Center in size? So, when the Center content expands OutsideContainer expands.

This way my Gradients show on the whole content area.

.Left
{
    background-image:url(themes/Light/images/BorderLeft.gif);
    background-repeat:repeat-y;

    float:left;
    background-color:#FF0000;/*Colors work in place of having the picture*/
    height:100%;
    width:8px;
}
.Center
{    
    float:left;    
    background-color:#FFFFFF;
    width:745px;
}
.Right
{
    background-image:url(themes/Light/images/BorderRight.gif);
    background-repeat:repeat-y;
    float:left;
    background-color:#00FF00;/*Colors work in place of having the picture*/
    height:100%;
    width:8px;
}
.OutsideContainer
{
    margin:0 auto;  
    width:761px;
    height:200px;
}

<body>
<div class="OutsideContainer">
  <div class="Left"></div>
  <div class="Center">blah blah <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />blah<br /></div>
  <div class="Right"></div>
</div>
</body>

Nachshon Schwartz · Accepted Answer · 2011-08-11T22:05:44.293

3

A better way of doing what you are trying to do is to give a padding to the outer box of the width of left and right remove the left and right divs and use a background image of both sides set to your set outer div width with a transparent background where the actual div goes. something like this:

enter image description here

And the CSS would look like so:

.Center
{    
    float:left;    
    background-color:#FFFFFF;
    width:771px;
}
.OutsideContainer
{
    padding: 0px 8px 0px 8px;
    background: url('picture.png') repeat-y; 
    margin:0 auto;  
    width:761px;
    overflow: hidden;
}

HTML:

<body>
<div class="OutsideContainer">
  <div class="Center">blah blah <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />blah<br /></div>
</div>
</body>

This may be the only way to do this with css.

edited Aug 11 '11 at 22:05

answered Aug 11 '11 at 20:50

Nachshon Schwartz

15,289
20
59
98

If I take away the width, I lose the centering created by OutsideContainer (think the div is just ignored). If I specify min-height instead of height, I lose `Left` and `Right`. I did add `overflow`. I'm still unable to achieve the result. I want a fixed width, dynamic height. – P.Brian.Mackey Aug 11 '11 at 20:58
3

Sorry, I thought you wanted the width to be dynamic, I've edited the answer but problem is I think what you want may not be possible unless you set the height of the left and right divs to a set height. otherwise your divs are relying on the height given to them by the div that there in which is set to match the divs that are within it, which results in a full browser sized div. – Nachshon Schwartz Aug 11 '11 at 21:04
I already have a fixed height which is calculated from the parent, `OutsideContainer`. I don't see how moving the height to `Left` and `Right` solves anything. Are you trying to say this is simply not possible? – P.Brian.Mackey Aug 11 '11 at 21:12
1

Did you mean that I am trying to say that it is impossible, if yes than yes, that is what I'm saying, at least in the way you are trying to so this. I've added an alternative solution, see edit above. – Nachshon Schwartz Aug 11 '11 at 21:26
2

Your alternative solution works like a champ. (I also learned IE7 supports PNG). Thanks! As an aside, for mozilla browsers there is a better way to do this: http://stackoverflow.com/questions/2717127/css3-gradient-borders. I have to support IE7, so the answer here is my choice. – P.Brian.Mackey Aug 11 '11 at 21:48
Why did you have to specify `overflow:hidden`? It works, but to me this is counter-intuitive. – P.Brian.Mackey Aug 11 '11 at 21:55
I'm not sure why, but I've had a similar problem and solved it this way, since then I've been using a lot. – Nachshon Schwartz Aug 11 '11 at 21:58

CSS - How can I setup a gradient drop shadow?

1 Answers1