DIV-only two column CSS layout

Question

Hey guys,

I'm reworking a layout currently using tables for a two-column design, and ran into some problems.

<div id="frame">

 <div id="leftcol">
  <div id="1">blah</div>
 </div>

 <div id="leftcol">
  <div id="2">blah</div>
  <div id="3">blah</div>
 </div>

</div>

#leftCol
{
 margin-right: 10px;
 width: 49%;
 float: left;
}

#rightCol
{ 
 width: 49%;
 float: left;
}

Originally I had a two-columned table with width=100% - this worked perfectly in Firefox, but in IE the table overflowed the #frame div container. I removed this table and added two floated divs, but I still have issues getting the columns to be equal.

All of my content resides inside the div #frame, which has height constraints as well as padding and a margin (I use this to leave a "gutter" around the edge of the page).

I need the two floated DIV columns to be the same width, and sit next to each other with a 10px (ish) gutter in between. I tried making both width: 50%, but this fails because the container they are in (#frame) is smaller width-wise then the whole body of the page. (If I get rid of the gutter padding, it works in FF but still not in IE.

Making each column width: 49% works, but looks ugly as the size changes between browsers and the right column does not line up with the edge of the #frame container.

I tried doing this before but ultimately went back to tables 9since it seemed to be working), but now that I see it's incompatible with IE I've been working for hours to find a cross-browser css solution. Any ideas?

Answer 1

I think you might benefit from a css framework like 960gs or blueprint css it allows absolute grid placement and is cross browser compatible out of the box.

http://www.blueprintcss.org/

http://960.gs/

Answer 2

Setting each column to 50% should work, if you make sure they don't have any margins or paddings.

If they need padding, put in an extra wrapper div, that can have as much padding/margins as neccesary.

For the gutter in between, you could give these wrapper divs a border on left/right side to make it look like a space in between the columns.

Posting a full code example (on jsbin.com for example) would also help us understand your problem more easily. :)

Answer 3

If you know the width of the frame, you can do this

#frame {
    background-color: green;
    width: 500px;
    overflow: auto;
}

#leftCol
{
    width: 245px;
    float: left;
    background-color: red;
}

#rightCol
{
    width: 245px;
    float: right;
    background-color: blue;
}

<div id="frame">

    <div id="leftCol">
    <div id="1">blah</div>
    </div>

    <div id="rightCol">
    <div id="2">blah</div>
    <div id="3">blah</div>
    </div>

</div>

Otherwise, an add an extra div, and do this

<div id="frame">

    <div id="leftCol">
    <div id="hack">
        <div id="1">blah</div>
    </div>
    </div>

    <div id="rightCol">
    <div id="2">blah</div>
    <div id="3">blah</div>
    </div>

</div>

#frame {
    background-color: green;
    width: 500px;
    overflow: auto;
}

#leftCol
{
    width: 50%;
    float: left;
}

#hack {
    margin-right: 10px;
    background-color: red;
}

#rightCol
{
    width: 50%;
    float: right;
    background-color: blue;
}