CODEWITHSUNDEEP
htmlcss
MarathonStudios
MarathonStudios

Reputation: 283

DIV-only two column CSS layout

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?

Upvotes: 2

Views: 4079

Answers (4)

Subash
Subash

Reputation: 7256

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.

Upvotes: 0

mpen
mpen

Reputation: 282845

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

Upvotes: 0

Rakward
Rakward

Reputation: 1717

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. :)

Upvotes: 1

Jed Schneider
Jed Schneider

Reputation: 14671

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/

Upvotes: 0

Related Questions