SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DIV Alignment & Verical Spacing

    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!
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  2. #2
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    Last edited by Aes; Oct 17, 2001 at 16:07.
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  4. #4
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  5. #5
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  6. #6
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  7. #7
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which row?
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  8. #8
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •