CSS and Height Issue

[TwisterMc]

I have a CSS problem. :) Check this out (http://www.twistermc.com/blog/2005/01/04/wanted-site-map-software) and see how the menu on the right is taller than the content? Well I'd like the content to be as tall as the menu. Anyone know how to fix that? I already tried wrapping everything in a DIV tag with a white background and that didn't help any.

Any suggestions?

[chachi]

I would wrap the content and the right nav bar in a div and float the nav div to the right. I am also assuming that the content and the nav are each separate divs...

[nevetS]

one idea would be to:

Wrap the header in it's own div. Absolutely position it.

Wrap everything else in a content div. Position the content div exactly underneath the header, so when you set the position of the menu, it's topmost point will be underneath the header.

Another idea: Put your footer inside the menu div. Assuming the menu is always bigger than the content, you'll be fine. That and use a negative margin on it, so it will extend to the left of the menu div.

[J.D.]

I have a CSS problem. :) Check this out (http://www.twistermc.com/blog/2005/01/04/wanted-site-map-software) and see how the menu on the right is taller than the content? Well I'd like the content to be as tall as the menu. Anyone know how to fix that? I already tried wrapping everything in a DIV tag with a white background and that didn't help any.

Any suggestions?

You've got a few empty paragraphs at the beginning of the menu - don't use empty <p>'s to format your HTML - use margins and padding.

As for your question - your menu and the content divs are absolutely-positioned and are not part of the document flow. Unless you specify height explicitly, they will *always* be different height.

Don't use absolute elements for something as simple as this - use a bunch of containing blocks, such as divs or tables.

J.D.

[TwisterMc]

no tables. ;) I thought this would be harder than I hoped. I'd have to re-design it. Why can't CSS just support 100% hight that worked right. Now i'm thinking of making a background image that'll repeat Y That might work too.

[nevetS]

have a look at some of the css files at www.csszengarden.com. Basically, it's hundreds of css files for the same html page so you can see all the different things you can do and how to do it. There's no tutorials, so you have to weed through the css on your own.

[J.D.]

no tables. ;) I thought this would be harder than I hoped. I'd have to re-design it. Why can't CSS just support 100% hight that worked right. Now i'm thinking of making a background image that'll repeat Y That might work too.

That was - divs or tables. You can use divs as well, although they aren't as portable as tables. Just do one big div containing content and your menu div. There's no need to use absolutely positioned elements in this layout.

BTW, with tables, it's a 5-minute job. Think if you really want to waste all this time for no apparent benefit.

J.D.

[TwisterMc]

I have a div around everything. I just need to re-work the menu then. Humm i'll look into it. When i find time. ;)

[TwisterMc]

Fixed my issue, or good enough for now. I had the answer the whole time and didn't realize it. ;)