PDA

View Full Version : CSS Div Height Relative to Another



DrRock
03-06-2007, 09:07 AM
Hi all,

I'm converting a WordPress template to match my client's site.

I have a header section, a content section, a sidebar (right) and a footer section.

The content section has its own div element as does the sidebar. I've wrapped
both content and sidebar into one div element and set its background color to that of the content background color. The sidebar element has a different bakground color.

Problem: depending on the amount of content, it sometimes pushes the wrapper to display beyond the sidebar. In effect, the content section has a larger height than the sidebar height.

Question: How do I scale the height of the sidebar to always be the height of the content (pink) section?

Picture worth a thousand words...

Here's how it should look:
http://blog.thomassaverio.com/

Here's the sidebar not scaling. Notice pink content creeps under sidebar:
http://blog.thomassaverio.com/?p=1#comments
Sidebar should instead scale with the content area and otherwise meet the footer.

Hope this makes sense.

Thanks

KLB
03-06-2007, 09:26 AM
In the past I have used a JavaScript to see what the height of one object was and then to apply that height to the other object. I know of no way to directly do this via CSS.