DIV Alignment & Verical Spacing

[Aes]

All righty. I have two problems:

1) How would I align a <div> element to the center (horizontally speaking) of a page? I've tried <div align="center">, but that will not work (in IE6/Netscape 6.1/Mozilla 0.9.5). How do I specify it within the div definition within the style element (e.g. #div name { position : absolute ; etc. etc. })?

2) I need the divs to expand to the correct height depending upon their contents (much like tables would if I were using them instead of divs). How would I go about doing that -- I can't find much on it.

Thanks!

[isotope235]

To align the div centered, set the margin-left & margin-right to some equivalent pixel value. This will cause the div to expand depending on resolution though.

In theory you could use margin-auto, but its not supported by IE 5.0.

The div should expand to fit the text as long as you don't assign an explicit height value.

[Aes]

All right; I'm stumped. Just take a look here:
http://www.htmletc.net/cssnewfinal.htm

It doesn't want to work in any browser now. What's going on?

[Aes]

All right. I've almost gotten this buggar worked out. I reverted back to one main table encapsulating the entire page, and then divs within that -- which makes for a good solution I think. However, there are a few problems I still need to sort out:

The center text (where it says "Hola Amigo") doesn't appear to be inside of its containing div element, even though I specified it to be there.

There's a thin line when viewed through Opera that I can't seem to rid the page of. Any ideas folks?

http://www.htmletc.net/cssnewfinal2.htm

[creole]

When fussing with a container element where the contents appear to be escaping form the container (DIVs, TABLEs, etc...), it's best to turn on borders. That lets you see what's going on.

I took a look at your code...I personally would say that you have gone WAY overboard with your DIV usage. You're nesting DIV's 4 and 5 levels deep. I don't have the time to examine but I would guarantee that you could create the same page with less code. You just need to sit down and work it out.

I took a screenshot of your page with borders turned on. It looks like the final inner container (#maincentercontent) doesn't have it's padding or margins set correctly.

[Aes]

THANK YOU creole! I reworked some of the code and have it three DIV levels deep at the most -- nothing more than that -- it seems to have helped. I have it 100% validated with XHTML/CSS w/ W3C validator. It's looking MUCH better. There's only a few problems now -- in Netscape 6.x/Mozilla there's spaces appearing between each row -- kind of screws up the look. Any ideas there?

[creole]

Which row?

[Aes]

Sorry -- I was about to post a screenshot; but Windoze decided to perform a major crash on me.



It doesn't seem to do it when I remove the !DOCTYPE declaration -- but I would prefer to keep that in there if I can.