Grow your CSS skills. Land your dream job.

[Solved] IE7 "float:left;" Dropping Below

  • # January 14, 2010 at 10:01 pm

    Dearest css-tricksters,

    Okay, here’s the site: http://www.carrythe1.com/stagenv

    in FF/Chrome it’s cool, but in IE it breaks (png fix to be applied later). Check it in FF/Chrome first to see it as it "should" be. There are several divs of importance:

    #pageWrap: centered, relative
    #gutterLeft: float left, padded out
    #contentWrap: 100% width, relative
    #content: float left, centered, width defined
    #gutterRight: float left, padded out

    What I’m expecting, is for there to be a gutter line (it’s a 1px width little embellishment to draw out the left/right edges of the content) on the left and right of the content that the two float: left; #gutter divs "sandwich". It works fine enough in FF/Chrome, but not in IE.

    In IE (specifically IE7) the left gutter line floats left, stays put, just works. The content floats left too (i think?) and look reasonably as expected… then the right gutter, drops to the next "line" below the #content div, as opposed to, to it’s right.

    I feel like it’s a straight forward fix, but can’t wrap my mind around it. Any help would be amazing.

    Thanks,

    CODE:

    CSS: there’s more to the site obviously, but this is where my gut says to focus…

    Code:
    /* ——–> Resets & Site Specific Defaults < -------- */

    @import url( '../assets/resetstyle.css' );

    html, body {
    font: 14px Georgia, serif;
    background: #362e25;
    color: #c2b59b;
    height: 100%;
    width: 100%;
    }

    /* --------> Site Structure/Layout < -------- */

    #pageWrap {
    position: relative;
    width: 750px;
    margin: 0 auto;
    padding: 300px 0 200px;
    }

    #contentWrap {
    position: relative;
    width: 100%;
    #width: 600px;
    }

    #content {
    float: left;
    width: 650px;
    margin: 0 auto;
    }

    #gutterLeft {
    float: left;
    /*width: 1px;*/
    padding-right: 49px;
    }

    #gutterRight {
    float: left;
    /*width: 1px;*/
    padding-left: 49px;
    }

    .clear {
    clear: both;
    }

    Code:

    welcome. let us handle the numbers

    content

# January 14, 2010 at 10:37 pm

YEAH BOYEEE!!!

Here was the fix: The changed declaration blocks in the second code section below, are those where the declarations are NOT indented.

Awesome. Between firebug, css-tricks.com and a firm wall to beat my head against… anything’s possible!

FROM THIS:

Code:
#pageWrap {
position: relative;
width: 750px;
margin: 0 auto;
padding: 300px 0 200px;
}

#contentWrap {
position: relative;
width: 100%;
#width: 600px;
}

#content {
float: left;
width: 650px;
margin: 0 auto;
}

#gutterLeft {
float: left;
/*width: 1px;*/
padding-right: 49px;
}

#gutterRight {
float: left;
/*width: 1px;*/
padding-left: 49px;
}

TO THIS:

Code:
#pageWrap {
position: relative;
width: 750px;
margin: 0 auto;
padding: 300px 0 200px;
}

#contentWrap {
float:left;
width:600px;
}

#content {
float:left;
margin:0 auto;
width:650px;
}

#gutterLeft {
float: left;
/*width: 1px;*/
padding-right: 49px;
}

#gutterRight {
float:right;
padding-left:49px;
}

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".