SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2005
    Location
    Canada
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 column layout ~ sidebar DIV content falling below main DIV in IE

    I've been working on this for a while and searched the forums for a solution, but my CSS skills are still developing, and I'm not sure what to look for.

    In FF and O 7 it works really well, but in IE the left sidebar DIV falls to below the main DIV. Anyone have any idea what I'm missing here?

    Take a peek at http://www.jasonprini.com/index3.php

    which uses the following css:

    /* globals
    ---------------------------------------------*/
    body {
    margin:0;
    padding:0;
    background-color:#000;
    font: small "Times New Roman", Times, serif;
    min-width:760px;
    background: #fff url(../images/b.gif);
    font-size: 12px;
    }
    div#wrap {
    background:#fff;
    margin:0 auto;
    width:760px;
    border: 1px solid #999;
    border-top: 0px;
    background-image: url(../images/bg.gif);
    }

    /*links
    ---------------------------------------------*/
    a:link {
    color: #333333;
    }
    a:visited {
    color: #FF9933;
    }
    a:hover {
    color: #FF9933;
    }
    a:active {
    color: #333333;
    }

    /* header
    ---------------------------------------------*/
    #header {
    background-color:#fff;
    background-image: url(../images/jp.jpg);
    background-position: right;
    background-repeat: no-repeat;
    }
    #header h1 {
    padding:10px 15px 5px;
    margin:0;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 22px;
    }

    /* navigation
    ---------------------------------------------*/
    #nav {
    background-color:#fff;
    padding:0px;
    border-bottom: 1px solid #999;
    }
    #nav ul{
    margin:0;
    padding:0;
    }
    #nav li{
    display:inline;
    list-style:none;
    margin:0;
    padding:0;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    }
    #nav a:link, #nav a:visited {
    padding: 3px 10px 0px 15px;
    color: #000;
    background-color: #fff;
    text-decoration: none;
    }
    #nav a:hover {
    color: #FF9933;
    background-color: #ccc;
    }

    /* main
    ---------------------------------------------*/
    #main {
    padding:0px;
    float:left;
    width:490px;
    }
    #main p {
    padding: 5px 15px 5px 15px;
    }
    #main h1 {
    padding: 5px 5px 5px 15px;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: #000;
    font-weight: bold;
    font-size: 22px;
    }

    /* moblog
    ---------------------------------------------*/
    #moblog {
    padding: 10px;
    width: 250px;
    float:left;
    }

    /* sidebar
    ---------------------------------------------*/
    #sidebar {
    width:267px;
    margin-left:490px;
    }
    /* Correct IE 3px fudge in #sidebar DIV
    ---------------------------------------------*/
    #wrap > #sidebar {
    width:270px;
    }
    /*
    ---------------------------------------------*/
    #sidebar h1 {
    padding:5px 10px 0px 0px;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-align:right;
    font-weight: bold;
    font-size: 12px;
    border-bottom: 1px solid #999;
    }
    #sidebar h3, #sidebar p {
    padding:0px 10px;
    }

    /* footer
    ---------------------------------------------*/
    #footer {
    background-color:#fff;
    clear:both;
    border-top: 1px solid #999;
    }
    #footer p {
    padding:5px;
    text-align:center;
    margin:0;
    }

  2. #2
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's because the two things that you're floating next to each other are too wide according to IE. Remember, IE has the broken box model so while things will look fine in browsers that support to correct box model, IE thinks the boxes are too wide to fit in the space you've provided.

    Try making them smaller or adding a hack to adjust the width for IE.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    maxors right in a way but its not a box model problem its the 3 pixel jog on floats that you haven't fully taken care of.

    Code:
    * html #main{margin-right:-3px}
    #sidebar {
    width:270px;
    margin-left:487px;
    }
    /* Correct IE 3px fudge in #sidebar above
    ---------------------------------------------*/
    #wrap > #sidebar {
    margin-left:490px;
    }
    /*
    You need to reduce the right margin of a float by 3px and then you also need to reduce the margin-left of the static element because ie adds 3px to it. This allows you to have the correct width for both elements.

    See The FAQ on floats for more info

    Paul

  4. #4
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    maxors right in a way but its not a box model problem its the 3 pixel jog on floats that you haven't fully taken care of.
    Ah, good find. I was just taking a guess and figured it was the more common of the two.

  5. #5
    SitePoint Member
    Join Date
    Jan 2005
    Location
    Canada
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for your help! Really apreciate it!

    Cheers!


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
  •