DIV-only two column CSS layout - html

Question

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

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 2

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

Answer 4

Ok here you go. This is how it can be achieved.
CSS
#leftCol, #rightCol{
width: 48%;
float: left;
background: red;
box-sizing: border-box;
}
#leftCol{
margin-right: 1%;
}
#rightCol{
margin-left: 1%;
}
HTML
<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>
If you need here is the vendor prefix for box-sizing.
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
Note that you have typo in your HTML wher both div are called #leftCol. There is no#rightCol.