Question

I have been trying to achieve a two-column layout with CSS where the left column is for navigation(don’t hold a vertical nav against me) and the right column is for content. The length of the content varies, but is always longer than the right column navigation. I am also aiming for at least gracefully degradation in <=IE7 and no JavaScript if I can help it.

I see there are other questions that aim for somewhat similar things, and that was how I found this article.

After trying to apply it my design, I came up with something I thought would work.

jsfiddle here: http://jsfiddle.net/FVsSV/2/

Relevant HTML:

<div id="mainCont">
<div id="sidebar">
    <a href="#">dapibus sit a</a>
    <a href="#">dapibus sit a</a>
    <a href="#">dapibus sit ag</a>
    <a href="#">dapibus sit a</a>
    <a href="#">dapibus sit a</a>
    <a href="#">dapibus sit a</a>
    <a href="#">dapibus sit a</a>
</div>
<div id="content">
    <div id="padding-wrapper">
        <h1>uris et lorem gravida condiment</h1>

        <h3 id="toc">apibus sit am</h3>
            Content content content...
    </div>
</div>
</div>

Relevant CSS:

#mainCont {
  background-color: #000;
  overflow: hidden;
  padding-left: 148px; /* The width of the rail */
  height:1%; /* So IE plays nice */
}



#sidebar {
    display: inline;
  background-color: #9BBCE4;
  width: 148px;
  float: left;
  margin-left: -148px;
}


#sidebar a {
    display: block;
    padding: 15px 0px;
    font-size: 1.1em;
    text-align: center;
    color: #2C2C2C;
    text-decoration: none
}

#sidebar a:hover {
    background-color: #4e88ce;
    color: #FFFFFF;
}

#content{
    background-color: #FFFFFF;
  width:100%;
  border-left: 148px solid #9BBCE4;
  margin-left:-148px;
}

#padding-wrapper {
    padding: 30px 30px;
}

/* content formatting*/
#content h1 {
    font-size: 1.5em;
    margin: 15px 0px 20px 0px;
}

/* content formatting END*/

It looks just fine in FF8 and IE8, but when I checked it in IE 7 and “compatibility view”, it looks pretty messed up and I’m not sure what the cause is or whether it can be easily fixed.

Is it something obvious that I’m missing, or is this method not worth trying for IE6-7 compatibility?

Answer 1

I believe this has to do with how IE7 handles specific widths and negative margins. Correct me if I’m wrong, but IE7 doesn’t suffer from the same box-model issues as IE6 does, but it still doesn’t get it quite right. (Maybe it does have the same box-model issue and this is the manifestation of it?) When you set the padding on the container (as you have with padding-left:148px), IE7 incorrectly adds that to the relative width used by child objects. When you then set a child object with width:100%, you end up with a child that’s too wide to fit into the space provided by the parent.

With the sidebar appearing first in the HTML and floated, the content should flow around it, but since IE7 thinks it’s too wide for the container, it forces it onto the first line after the floating object. @Scott is correct – if you remove the width:100% from the CSS rule for the content div, it flows correctly in IE7. (I can’t personally verify this in IE6, though.)

What we should learn from this, of course (beyond the headaches from working with IE), is that negative margins can cause some odd behavior and should probably be avoided in most scenarios. With that being said, though, your approach to a two-column layout with the background of the shorter column matching the height of the longer column is intriguing.