Help with DIV layout and CSS height

Answer 1

Getting divs to match heights is very hard to do with CSS. There are some tricks to doing it, but I think there's an easier solution here.

Why not just make the red pattern the body background image and have it tile? If you want to display something else, just have it go on top. From what I can see of your design, that looks like the easiest solution to me.

If you do want to try to get the divs to match heights, I'd suggest using the absolute columns trick. Something like this will work, I think: (Although I haven't actually tested it.)

<div id="content">
    <div id="left-shadow"></div>
    <div id="text">
        text goes here
    </div>
    <div id="right-shadow"></div>
</div>

With this CSS:

#content {
    position: absolute;
}
    #left-shadow {
        position: relative;
        left: 0; top: 0; bottom: 0;
        /* width needs to be specified */
    }
    #text {
        /* width needs to be specified */
    }
    #right-shadow {
        position: relative;
        right: 0; top: 0; bottom: 0;
        /* width needs to be specified */
    }

And then set the pattern as the background images for left/right-shadow.

Answer 2

I would use a transparent PNG for the shadow, 1px high. It would contain the shadow on the left, then a blank area the width of the content/header, then the right hand shadow. In the example below this would be 1x932 pixels.

Example code:

<style type="text/css">
  #headerBG {
    background: gray url("repeating-background");
  }
  #contentBG {
    background: red url("repeating-background");
  }
  .shadow {
    width: 900px; /* width of inner content */
    margin: 0 auto;
    padding: 0 16px; /* width of shadow bit */
    background: transparent url("new-shadow") repeat-y;
  }
</style>

<div id="headerBG">
  <div class="shadow">
    header content
  </div>
  <div class="shadow">
    navigation
  </div>
</div>

<div id="contentBG">
  <div class="shadow">
    body content
  </div>
</div>

For the different background colours on the header/body, you'll either need to add an extra div inside the shadow (around the content), or create multiple shadow images where the blank bit in the middle contains the correct background color. However if you're filling the header with a separate image anyway you could probably get away with just the body color - the header will cover that up.