Skip navigation
phyllisj9
phyllisj9
Currently Being Moderated

Help centering divs

May 12, 2011 6:15 AM

Okay I'm tearing my hair out here!

 

I'm working on a Web design for a class.  I'm trying to make a fixed header that is centered on the screen.  The block containing the header is 950 pixels wide and should auto-center.

 

Here's a link:

http://pjutter.com/Sessions/AdvancedCSS/Lesson3/indexNew.html

 

This is working on Firefox and Google Chrome but not on Internet Explorer (where it is totally messed up and unreadable).

 

I cannot figure out how centering works.  Supposedly margin: 0 auto should center a div, but that only occasionally works.  I've used negative margins to center the 950-pixel div, and that works on everything except IE which is ALL messed up.

 

The CSS file for the header is the one called headernav.  The others are part of the Blueprint framework which I'll be using on the grid underneath the header.  So just ignore the others.

 

Can anyone help me with this?

 

Thanks, Phyllis

447 Views   6 Replies   Latest reply: Nancy O., May 13, 2011 3:31 PM
 
Replies
  • phyllisj9
    Currently Being Moderated
    1. phyllisj9,
    May 12, 2011 6:31 AM   in reply to phyllisj9
    Report

    Wait, I did get it to center without the negative margins (by putting in text-align: center all over the place).  But the page doesn't function in Internet Explorer  (some items -- including the background image -- are shoved halfway off the screen).  This is driving me crazy!  Any help would be appreciated.  Thanks, Phyllis

     
    |
    Mark as:
  • phyllisj9
    Currently Being Moderated
    2. phyllisj9,
    May 12, 2011 6:44 AM   in reply to phyllisj9
    Report

    I got the background images to move over onto the page since I can specify those as left: 0.  I can't do that with the 950-pixel wide divs though.  So they're still all messed up.

     

    I love CSS, but I really miss the "center" tag (I learned basic HTML a long time ago when everything was done with table-based layouts -- it was super-easy to center stuff).

     

    Thanks, Phyllis

     
    |
    Mark as:
  • darose2444
    Currently Being Moderated
    3. darose2444,
    May 12, 2011 9:00 AM   in reply to phyllisj9
    Report

    I cannot see your css, but did you try adding "display: inline-block;" to the outer <div>?

     
    |
    Mark as:
  • phyllisj9
    Currently Being Moderated
    4. phyllisj9,
    May 12, 2011 9:22 AM   in reply to phyllisj9
    Report

    I figured it out!  Well, sort of.  I just redid everything from the beginning.  I think the problem was that I had a wrapper element set to absolute positioning. I guess it has to be relative positioning in order to center to the page?  So if I want a fixed-width navigation that's absolutely positioned I need to put it inside a wrapper that's relatively positioned with auto margins?

    new version (please let me know if it doesn't work on your version of IE!):
    http://pjutter.com/Sessions/Advanced...indexNew2.html

    Thanks, Phyllis

     
    |
    Mark as:
  • sweetpea01
    Currently Being Moderated
    5. sweetpea01,
    May 13, 2011 6:10 AM   in reply to phyllisj9
    Report

    I got a 404 error when I clicked your link.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    6. Nancy O.,
    May 13, 2011 3:31 PM   in reply to phyllisj9
    Report

    Can't see your page.  But static (unspecified) positioning is all that's required for 98% of page layouts.  I very rarely use APDivs except for special situations like disjointed rollovers, lightbox windows or flyout menus.  And then I wrap them inside a position:relative container.

     

     

     

    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points