Question

I am trying to use Zen Grids to avoid spending hours fighting with my layouts as I have been. The main advantage that I wanted from it besides simplicity was avoiding the compounding sub-pixel rounding issues in most browsers (provided via floats and negative margins to position the elements rather than relying on the previous columns).

However, in IE7 I cannot get the layout to behave. I have IE7 legacy support on and the boxsizing.htc working correctly. The test page I made consists of a header, two side bars, a content area, and a footer. When positioning the elements using floats and negative margins as Zen Grids does, I end up with all of the elements stacking in the same physical space, as you can see below. Using Zen Grids results in the exact same behavior. This only happens with IE7 (I am not concerned with IE6).

I have tried setting haslayout on different elements with no success and I cannot find an example of the same issue to save my life.

Layout collapse screenshot.

I set up a jsfiddle example here: jsfiddle

Here is the html:

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/style.css">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <div class="container">
        <div class="header">
            <h2>Header</h2>
        </div>
        <div class="sideOne">
            <h2>Sidebar 1</h2>
        </div>
        <div class="content">
            <h2>Page Content</h2>
        </div>
        <div class="sideTwo">
            <h2>Sidebar 2</h2>
        </div>
        <div class="footer">
            <h2>Footer</h2>
        </div>
    </div>

</body>
</html>

And the CSS:

.container {
    position: relative; /* Checked to see if haslayout was the issue */
    zoom: 1;
    width: 1000px;
    background: silver;
}
.header {
    float: left;
    margin-left: 0;
    margin-right: -100%;
    width: 100%;
    height: 60px; /* For visibility */
    background: green;
}
.sideOne {
    float: left;
    clear: left;
    margin-left: 0;
    margin-right: -25%;
    width: 25%;
    height: 40px; /* For visibility */
    background: purple;
}
.content {
    float: left;
    margin-left: 25%;
    margin-right: -75%;
    width: 50%;
    height: 40px; /* For visibility */
    background: orange;
}

No correct solution

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top