Getting content and nav divs the same height

getting left and right divs to same height

[pugg09]

I'm sorry to do this - but google didn't help at all. It's a typical issue. My left div (#content) holds the page content, and the right div (#news) hold the news information. But I can't get them to be the same size. They are both inside a #main div container set at 100%. Am I missing something?

I know I may have some overlap between the stylesheet css and the inline css in the htm file, but I've been hacking for hours, so please forgive me.

Let me know if I've pasted too much here ok? I don't want to break any rules in this forum. You guys have always been a great help!

Here's the demo link.

<snip>

[edited by: swa66 at 3:55 pm (utc) on Jan. 7, 2009]
[edit reason] No URLs, no specifics in code, please sse forum charter [/edit]

[swa66]

100% height might be a bit counter intuitive: it sets an element to have the height of its direct parent provided that parent doesn't have height set to auto (which is the default). The only exception is supposed to be the root element that has height equal to the height of the viewport.

So height 100% is tricky to use, esp if you might have (we all might have) content that's higher than the viewport given to us by the visitor.
Also since the parent cannot have auto height making a child stretch to accommodate the content in the children isn't going to work either.

So what does work to make a parent stretch and give the impression of columns that stretch all the way ?
to make the parent stretch: add something under the floated columns, such as a footer or even a <br>. Next give that element a clear and do not float it itself.
Alternatively: floated parents will encompass their floated children, so that might be an option too.

Once the parent has the right height, you set background on the parent(s) to create the look you seek, without actually adding the background and borders on the columns themselves.

Also take care with padding and margins on the children elements, they just might give you some difference.

[pugg09]

So, in total, i have a container div called #main, inside it - at the top is my #header div, then i float left and right the #content and #news div respectively, then below it I have just a generic div with the clear set to 'both' and the float set to 'none'. Those are all the elements inside the container div.

I've removed all the height attributes in all my elements - but no luck. The columns are still off.

Is there anything else I can try?