SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to center a position: fixed header

    Hello,

    I am customizing this theme: http://demo.studiopress.com/minimum/ .

    I am trying to make the header (the part with the logo and menu) just 1140px wide instead of 100% and make it centered, but I also want it to remain fixed at the top of the screen. If I remove position: fixed, it will center, but with that applied, it will not.

    Is there a workaround for this type of thing?

    ~Susan

  2. #2
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    265
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi
    Try this css code:
    Code:
    #someid {
        position: fixed;
        /* center the element */
        right: 0;
        left: 0;
        margin-right: auto;
        margin-left: auto;
        /* give it dimensions */
        min-height: 10em;
        width: 90%;
    }
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    That's a nice solution, @MarPlo . (It also works with the required 1140px width.)

    Another option would be this (although I think I prefer MarPlo's):

    Code:
    .site-header {
        position: fixed;
        left: 50%;
        margin-left: -570px;
        width: 1140px;
    }

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post

    Another option would be this (although I think I prefer MarPlo's):

    Code:
    .site-header {
        position: fixed;
        left: 50%;
        margin-left: -570px;
        width: 1140px;
    }
    The downside of that technique is that as you close the window the left side of the element slides off the left side of the window and is unreachable. Some people used to center whole pages like that and it's a bit of nightmare on smaller screens.

    I usually use the same technique as MarPlo for both fixed and absolute elements. As long as the element has a width (or a max-width) then left:0 and right 0 will center the element within the containing block (as will top:0 and bottom:0 vertically center the element with a fixed height). It doesn't work in IE7 though and if IE7 compatibility is needed another option is simply to nest a static element of the desired width inside a 100% wide fixed element and center it in the normal way.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much, everyone! That solution works beautifully.


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
  •