three-column layout looks fine in IE, not safari?

Discussion in 'Web Design and Development' started by kevindosi, Jul 14, 2009.

  1. kevindosi macrumors regular

    Joined:
    Mar 16, 2006
    #1
    I'm trying to make my wordpress blog a 3-column layout with 2 sidebars and a main content column in the middle. For some reason, it looks exactly the way I want in IE, but it looks like crap in Safari and Firefox. I'm kind of confused because usually the problem is the other way around.
    You can see the page at http://www.beforethecubicle.com/blog to see what I'm talking about.
    My basic HTML layout is as follows:
    <div id="sidebar1"><?php include('sidebar1.php') ?></div>
    <div id="sidebar2"><?php include('sidebar2.php') ?></div>
    <div id="maincolumn">content here</div>

    And the CSS:
    #maincolumn {
    width:50%;
    padding:25px;
    float:left;
    }
    #sidebar1 {
    width:20%;
    float:left;
    padding:10px;
    font-size:80%;
    font-style:italic;
    }
    }
    #sidebar2 {
    width:20%;
    float:right;
    padding:10px;
    font-size:80%;
    font-style:italic;
    }

    I'd appreciate it if anyone could help me out. Not sure what I'm doing wrong.
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Get rid of that extra } it causes validity issues and thus results in the #sidebar2 styles not being applied.
     
  3. kevindosi thread starter macrumors regular

    Joined:
    Mar 16, 2006
    #3
    Wow, I have no idea how I missed that. I must have looked over it a thousand times and never saw it. Thanks a lot, that did the trick!
     

Share This Page