Trouble with CSS layout, might be the margin:0 auto;

Discussion in 'Web Design and Development' started by coyote78, Mar 13, 2007.

  1. coyote78 macrumors newbie

    Mar 13, 2007
    I am new to mac, just bought me a iMac. Guess my surprise when i saw that a web page i just made was totally messed up in all my browsers (IE, Safari, Opera and Firefox) on my mac. They all worked fine on my PC.

    I am using Joomla CMS, and have a Structure.css file to define the layout. If i take away the margin auto code (marked red in code below), the section looks fine but is not centered. If i put it back in the section goes bananas again. Do anyone know what causes this?

    The page can be found at

    kind regards

    #wrap {width:800px; height:185px;/*570px;*/ margin:0 auto; background-color:#FFFFFF; vertical-align:middle;} /* Main area of the page */
    #toplogo {background-image:url(../images/header.gif); height:120px; width:800px;}
    #menuarea {background-image:url(../images/nav_bk.gif); width:800px; height:65px; text-align:left;}
    #menu {float:left; width:600px; padding-left:75px; padding-top:10px; margin-left:0px;}
    #lang {float:left; padding-top:49px; padding-left:40px;}

    #wrap2 {width:800px; height:385px; margin:0 auto; background-color:#FFFFFF;}
    #leftside {float:left; width:60px; height:385px; background-image:url(../images/left_bk.gif); padding:0px; margin:0px;}
    #contentwrap {float:left; width:680px; height:385px;}
    #content {width:650px;/*650px;*/ height:295px;/*295px;*/ padding:10px; margin:5px; overflow:auto;}
    #footer {width:680px; height:60px; background-image:url(../images/footer.gif);}
    #rightside {float:right; width:60px; height:385px; background-image:url(../images/right_bk.gif);}
  2. LtRammstein macrumors 6502a


    Jun 20, 2006
    Denver, CO
    What you defined to be the problem is correct. You need to define margin as being 0 OR auto, it can't be both.

  3. epochblue macrumors 68000


    Aug 12, 2005
    Nashville, TN
    Whoa. No. "margin: 0 auto" is a perfectly valid CSS rule. It stays that you want 0 margin on the top/bottom and automatic margins (center for non-IE 6- browsers) on the left/right.

    Why that's causing something to muck up, I'm not entirely sure. I'm at work with Windows right now and the site looks fine in FF2. I'm astounded that it might look different in FF2 on Mac, though, as the rendering engine is exactly the same.

    My guess, however, is the problem is somewhere in the HTML, but (again) without being at home and on my Mac to see, it's hard to say.
  4. coyote78 thread starter macrumors newbie

    Mar 13, 2007
    More of the code that might be wrong, any more ideas?

    It is still a mystery to me. As you said the CSS code should be right, but it is still messing up the design.

    Here is some of the HTML code.


    <div id="wrap"> <!-- Main site area -->
    <div id="toplogo"></div>
    <div id="menuarea">
    <div id="menu"><?php mosLoadModules ( 'user1' ); ?></div>
    <div id="lang"><?php mosLoadModules ( 'user3' ); ?></div>
    <div id="wrap2">
    <div id="leftside"></div>
    <div id="contentwrap">
    <div id="content"><?php mosMainBody(); ?></div>
    <div id="footer"></div>
    <div id="rightside"></div>
    <br />

    And here is some of the main CSS code.

    body {
    text-align:left; margin: 0px auto;
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 12px;
    scrollbar-face-color: #ffffff;
    scrollbar-highlight-color: #BBC9EF;
    scrollbar-shadow-color: #919BBE;
    scrollbar-3dlight-color: #BBC9EF;
    scrollbar-arrow-color: #919BBE;
    scrollbar-track-color: #FFFFFF;
    scrollbar-darkshadow-color: #BBC9EF;

    Does any of this look wrong?

    kind regards

Share This Page