Help needed with DIV-layout for site

Question

I am trying to build a page with the following in it:

Already have the following:

• one div for page to center the whole page with width 809px
• inside <div class="page"> is the following:
  • <div class="header">
  • <div class="container"> (container for content stuff)
  • <div class="footer">

What I am struggling with:

• <div class="container"> should contain the following:
  • leftmost <div class="leftShadow"> with 100% height to container, with left shadow image as background for <div class="leftShadow">
  • second to left <div class="custom_content"> with 100% height to container (will contain content of page
  • second to right <div class="sidebar_right"> with 100% height to container (will contain extra links)
  • rightmost <div class="rightShadow"> with 100% height to container, with right shadow image as background for <div class="rightShadow">

So to summarise:

<div class="page">
    <div class="header">header image</div>
    <div class="container">
        <div class="leftShadow"><img src="images/spacer.gif" alt="" /></div>
        <div class="custom_content">(this is where the content would be)</div>
        <div class="sidebar_right">(some other links)</div>
        <div class="rightShadow"><img src="images/spacer.gif" alt="" /></div>
</div>

So what is supposed to happen is, when either custom_content or sidebar_right div's strength in length below the other, the other one would stretch in height to be the same with as the longer div. Obviously, both side div's (leftShadow and rightShadow) should also stretch to 100% of the container's height.

Can someone please guide me in the right direction? Basically, these div's should behave much like a table would when one td's content stretches beyond the height of the other td's.

Answer 1

I'd do this differently because you're not going to get your divs to behave like tables.

I'm not entirely sure what you're wanting this to look like, but I'm guess you want some sort of shadow image down the left and right side of the container div. How about removing the leftShadow and rightShadow divs, put a repeatable background image on the content div of width 809px (and maybe height 1, depending on what your shadow image looks like). Also perhaps set overflow:hidden on the content div - if I remember rightly thats a kind of hack which will make the containing div stretch in this situation.

Answer 2

Perhaps you won't need the leftShadow and rightShadow divs: take a look at faux columns.

This is what you are looking for, I hope. :)

Answer 3

Why not use something like "Faux Columns"?

See http://www.alistapart.com/articles/fauxcolumns/

Answer 4

Don't use divs like tables!

The leftShadow and rightShadow divs are completely unnecessary. Combine your background images into a single image and set it as the background of your container div.

To make sure the background image fills the height of the container, set background-repeat: repeat-y.