css div repeating shadow

hi there; my css skills are average but this one is stumping me.

i have a page that is 959px wide.  on each side is a 2px "gradient shadow" (leaving 955px "whitespace" in between).  by gradient shadow, i mean it is 2px width X 300px height image and fades from dark (at the top) to light (at the bottom).

so, to recap, my page looks like this: 2px left shadow image (left) ... 955px whitespace (middle) ... 2px right shadow image (right).

my html currently looks like this:

<div id="rightShadow"><img src="images/shadow_right.jpg" height="300" width="2" alt="" /></div>
<div id="leftShadow"><img src="images/shadow_left.jpg" height="300" width="2" alt="" /></div>
<div>My content</div>

ultimately, what needs to happen is the left shadow image needs to align at the top of the left side of the page and the right shadow image needs to align at the top of the right side of page ... then a 1px X 2px background shadow (called shadow_right_bkg.jpg and shadow_left_bkg.jpg respectively) image repeats underneath each of them all the way to the bottom of the page ... giving the illusion that the 300px high shadow images are extending all the way down to the bottom of the page (i.e. without these background repeater shadows, then the shadow would just stop once the page height reached 300px ... leaving 2px wide of white space underneath for the remainder of the page).

hope that's clear.  

thanks, in advance, for your assistance.
LVL 1
vbnewbie01Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
melink14Connect With a Mentor Commented:
I did some testing, and the problem is a tricky one.  

The side divs, only expand to their content.

I thought setting them to 100% would work, since that should make them 100% of the enclosing div's height, but there was a problem.

Inheriting the height didn't work either.

I'm stumped at this point.  If I think of something else I'll try it out.

You could use javascript I suppose, but that's hardly an elegant solution.  There's surely a css way to do it.

There might be others here who know.
0
 
melink14Commented:
set the divs with the images with a width of 2px and no height.

Set the images as backgrounds of their respective divs, and turn background repeating on.

That should do what you want I belive.
0
 
vbnewbie01Author Commented:
hey, melink14; thanks for the response ... this is essentially what i already had (see below) but it is not working.

#shadowLeft{      
float:left;
width:2px;
height:auto;
padding:0;
margin-right:0px;
background: url("images/shadow_left_repeat.gif") repeat-y;
}

#content{      
text-align:left;
float:left;
padding:0px;
margin:0px;
display:block;
width:959px; /* 4px of this taken by shadowLeft and shadowRight AND 40px taken by left padding and right padding leaving 915 workable area */
background-color:#ffffff;
color:black;
}

#shadowRight{
float:right;
width:2px;
padding:0;
margin-left:0px;
background: url("images/shadow_right_repeat.gif") repeat-y;
}
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
melink14Commented:
what's your current behavior using the above?
0
 
vbnewbie01Author Commented:
it positions the shadow images to the top left and top right as i wanted.

it's not, however, repeating the shadow background.

so, basically, when the content on the page extends beyond 300px (the height of the left and right shadow images) then it is just empty space underneath (where there should be the shadow_left_repeat.gif and shadow_right_repeat.gif).

thanks again.
0
 
melink14Commented:
I don't suppose you have this uploaded somewhere?
0
 
vbnewbie01Author Commented:
hey, melink14; forget the code i posted.  copy and paste - as is - this new test page i've been working on.

for the shado images, any old 2px X 300px will do and store in an images folder.  the shadow repeater image i was using is 2px X 1px (also stored in the images folder).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>

<style type="text/css">

html, body {margin:0px; padding:0px; font-family:verdana; font-size:12px;}

#container {position:relative; display:block;}
#inner {display:block; margin-left:-200px; margin-right:-200px; padding:0px;}
#left {float:left; position:relative; width:2px; left:0px; background: url("images/shadow_left_repeat.gif") repeat-y;}
#right {float:right; position:relative; right:0px;}
#center {margin-left:200px; margin-right:200px; position:relative; display:block; height:1%;}
.clear {clear:both;}


</style>
</head>

<body>


<div id="container">
      <div id="inner">
            <div id="left"><img src="images/shadow_right.jpg" alt="" /></div>

            <div id="right"><img src="images/shadow_left.jpg" alt="" /></div>

            <div id="center">
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            
            
            </div>
                  
      </div>
</div>


</body>
</html>
0
 
vbnewbie01Author Commented:
melink14; i appreciate the time and effort that you put into this ... i have spent waaaaay too much of it myself and have ultimately decided to use, in this case, an html table.

<table cellpadding="0" cellspacing="0" border="0" style="width:959px; background-color:#ffffff;">
      <tr>
        <td style="background: url(images/shadow_left_repeat.gif) repeat-y; width:2px;" valign="top"><img src="images/shadow_right.jpg" alt="" /></td>
        <td style="width:955px; vertical-align:top; text-align:left;">Content</td>
        <td style="background: url(images/shadow_left_repeat.gif) repeat-y; width:2px;" valign="top"><img src="images/shadow_left.jpg" alt="" /></td>
      </tr>
    </table>

i will award your final post the the solution as i believe you are right.  in all my research, i only came across similar javascript suggestions ... none, however, expaining "how" to do it ... just that javascript may be the answer.

anyway, thanks again.
0
 
melink14Commented:
If you're set on using tables that's fine.  But for future reference here is a javascript version of what you want to do without tables.




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>

<style type="text/css">

html, body {margin:0px; padding:0px; font-family:verdana; font-size:12px;}

#container {position:relative; display:block;}
#inner {display:block; margin-left:200px; margin-right:200px; padding:0px;}
#left {
      float:left;
      height: 100%;
      position:relative;
      width:2px;
      left:0px;
      background: url("shadow_left_repeat.gif") repeat-y;
}
#right {
      float:right;
      height: 100%;
      position:relative;
      right:0px;
      width:2px;
      background: url("shadow_right_repeat.gif") repeat-y;
}
#center {margin-left:200px; margin-right:200px; position:relative; display:block;}



</style>
<script type="text/javascript">
function setsideheight() {
centerheight = document.getElementById("center").offsetHeight;
document.getElementById("left").style.height = centerheight;
document.getElementById("right").style.height = centerheight;
}
</script>
</head>

<body  onresize="setsideheight()">

<div id="container">
      <div id="inner">
            <div id="left"><!--<img src="shadow_right_repeat.gif" alt="" />--></div>

            <div id="right"><!--<img src="shadow_left_repeat.gif" alt="" />--></div>

<div id="center">
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
            This is the content<br />This is the content<br />This is the content<br />
           
           
            </div>
                 
      </div>
</div>

<script type="text/javascript">
setsideheight();
</script>

<!--<script type="text/javascript">
centerheight = document.getElementById("center").offsetHeight;
alert(centerheight);
document.getElementById("left").style.height = centerheight;
document.getElementById("right").style.height = centerheight;
</script>
</body>-->
</html>
0
 
melink14Commented:
with a bit more searching I found an even better than my quick solution (which is specific to this problem, and might not work in all browsers) so I thought I'd link it.

http://www.killersites.com/blog/2006/matching-div-heigths/
0
All Courses

From novice to tech pro — start learning today.