1

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?

RedRiderX
  • 334
  • 6
  • 25
  • Don't combine "inline" and "float". Just use "float" – Diodeus - James MacFarlane Dec 22 '11 at 20:17
  • 1
    @Diodeus: The `display: inline` style is a workaround for [IE6's double margin bug on floated elements](http://www.positioniseverything.net/explorer/doubled-margin.html). Other browsers will safely ignore that declaration and turn the element into a block. – BoltClock Dec 22 '11 at 20:22

2 Answers2

2

I think you can just remove your width: 100% on #content and it will work fine in IE7 (and other browsers).

ScottS
  • 71,703
  • 13
  • 126
  • 146
  • interesting. can you also explain why this (magically) works? – ptriek Dec 22 '11 at 20:22
  • @ptriek--not really, though TLS gave what sounds like a possible explanation. Often times I don't always try to figure out "why" with browser bugs (since the why is often the browser rendering behavior), I just "experiment" to find what works. – ScottS Dec 23 '11 at 14:46
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.

TLS
  • 3,090
  • 2
  • 25
  • 33
  • 1
    Thanks to both TLS and @scott for the right answer. I was mainly focusing on what could be wrong with the parent element, but didn't think a lot on the `content` element. Thanks also to TLS for explaining the arcane world that is IE. I really can't take credit for any cleverness in the design as most of that came from the [great article](http://www.alistapart.com/articles/multicolumnlayouts/) I found at a list apart. – RedRiderX Dec 23 '11 at 14:36