Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    How do I center align a DIV within another DIV in Moz and IE? This...

    Code:
    <div style="width: 100%; text-align: center;">
    <div style="width: 750px;"></div>
    </div>
    ...is IE only, this...

    Code:
    <div style="width: 100%; padding-left: 50%; position: relative;">
    <div style="width: 750px; position; absolute; left: -375px;"></div>
    </div>
    creates horizontal scrolling both in IE and in Moz.

    Any ideas?
    JR

  2.  

  3. #2
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    Code:
    #id{
    position:absolute;
    left:50%;
    margin-left:-[1/2 container width];
    }
    
    OR
    
    #id{
    margin-left:auto;
    margin-right:auto;
    }
    Note the latter produces bugs in IE under some circumstances.
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  4. #3
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    1st one works but leaves horizontal scrolling in Moz, and the second one doesn't work at all.
    JR

  5. #4
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    It's not that causing the horizontal scrolling... Maybe you have some issues somewhere else?

    These examples work flawelessly every time I use them.

    Check www.bluerobot.com and the CSS Centering Examples for some working code of those.
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  6. #5
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    I'm using the second example and it works:
    Code:
    #div {
    margin-left:auto;
    margin-right:auto
    }
    Also use this for some old browsers:
    Code:
    body {
    text-align:center
    }
    EDIT- Of course the second code I've posted is only valid if you want to center a big container div with everything inside it.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:19 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com