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

[copperSmith]

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:

* about us
* our services
* contact us

welcome. let us handle the numbers

content

questions?

contact info

[copperSmith]

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;
}

[Author]

Posts