Problem centering layout

Discussion in 'CSS' started by Mooseman, Mar 2, 2007.

0
  1. #1
    Okey, so I got this site I'm testing out CSS, divs etc on and I got problem with centering the layout.
    In firefox it looks perfect, but when I'm using IE7 it's on the left..
    (Link to the site is in my sig)

    The CSS code for the container:

    #container{
    width: 820px;
    margin-left: auto;
    margin-right: auto;
    text-align:left;
    background: url(bilder/bilder2/bgc.gif) repeat-y;
    position:absolute;
    left:0;
    right:0;
    }

    Any help would be appreciated :)
     
    Mooseman, Mar 2, 2007 IP
  2. tolra

    tolra Active Member

    Messages:
    515
    Likes Received:
    36
    Best Answers:
    1
    Trophy Points:
    80
    #2
    You don't want the position: absolute, left: 0 or right: 0 on the container style.

    Then you'll need to wrap another div around container with the style, text-align: center, after that you should be good.
     
    tolra, Mar 2, 2007 IP
  3. nwk

    nwk Well-Known Member

    Messages:
    385
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    158
    #3
    Remove the absolute positioning. Absolute positioning over-rides floating. Try this:)

    #container{
    width: 820px;
    margin-left: auto;
    margin-right: auto;
    text-align:left;
    background: url(bilder/bilder2/bgc.gif) repeat-y;
    }
     
    nwk, Mar 2, 2007 IP
  4. veckd

    veckd Peon

    Messages:
    1,065
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #4
    or just

    #container{
    width: 820px;
    margin: 0 auto;
    text-align:left;
    background: url(bilder/bilder2/bgc.gif) repeat-y;
    }
     
    veckd, Mar 2, 2007 IP
  5. Mooseman

    Mooseman Peon

    Messages:
    453
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I've tried removing absolute positioning.. it makes it work fine in IE, but in FF the container looses the bg..(the repeat of the bg at least)
    The same thing happens if I put margin: 0 auto;..

    This happens:
    [​IMG]

    And I didn't quite understand the wrapper thing.. it's the same as before when I try that.. makes it work in IE but not FF..
     
    Mooseman, Mar 2, 2007 IP
  6. Katy

    Katy Moderator Staff

    Messages:
    3,490
    Likes Received:
    513
    Best Answers:
    7
    Trophy Points:
    355
    #6
    Try this:

    html,body{
    margin:0;
    padding:0;
    text-align: center;
    }

    #container{
    width: 820px;
    height: 100%;
    margin: 0 auto;
    }

    #background {
    background: url(bilder/bilder2/bgc.gif) repeat-y;
    width: 820px;
    float: left;
    }

    Then use:

    <body>

    <div id="container">

    <div id="background">

    Content here

    </div>
    </div>

    And don't forget to add text-align: left; to your content, otherwise it will be centered. :)
     
    Katy, Mar 2, 2007 IP
  7. tolra

    tolra Active Member

    Messages:
    515
    Likes Received:
    36
    Best Answers:
    1
    Trophy Points:
    80
    #7
    You need to clear the floats (clear: both) just before the footer div, however you've got a mix of absolute and relative positioning which is going to cause you a problem. You need to remove all the absolute positioning.

    The other problem you have is the use of pre tags because the source layout adversely affects the rendered page, I'd normally use div.
     
    tolra, Mar 2, 2007 IP
  8. tolra

    tolra Active Member

    Messages:
    515
    Likes Received:
    36
    Best Answers:
    1
    Trophy Points:
    80
    #8
    http://stuff.tolranet.co.uk/dp/mooseman/ that's about the best I can do, but as per the original it doesn't work in IE6.

    Both the HTML and CSS were changed, I hope it's of some use, please let me know when you've finished with it and I'll delete it from my server.
     
    tolra, Mar 2, 2007 IP
  9. Mooseman

    Mooseman Peon

    Messages:
    453
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Thanks alot for the help guys
    Now it's fixed so it works in IE7 and FF :)
     
    Mooseman, Mar 2, 2007 IP