Two column div layout with fluid left and fixed right column

Question

I want to make a two column layout using DIVs, where right column will have a fixed width of 200px and the left one would take all the space that is left.

It's quite easy, if you use tables:

<table width="100%">
  <tr>
    <td>Column 1</td>
    <td width="200">Column 2 (always 200px)</td>
  </tr>
</table>

But how about DIVs? Is it possible to accomplish this? If yes, then how?

Trustworthy

Short answer? Yes – Frisian

Answer 1

The following examples are source ordered i.e. column 1 appears before column 2 in the HTML source. Whether a column appears on left or right is controlled by CSS:

Fixed Right

#wrapper {
  margin-right: 200px;
}
#content {
  float: left;
  width: 100%;
  background-color: #CCF;
}
#sidebar {
  float: right;
  width: 200px;
  margin-right: -200px;
  background-color: #FFA;
}
#cleared {
  clear: both;
}

<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>

Fixed Left

#wrapper {
  margin-left: 200px;
}
#content {
  float: right;
  width: 100%;
  background-color: #CCF;
}
#sidebar {
  float: left;
  width: 200px;
  margin-left: -200px;
  background-color: #FFA;
}
#cleared {
  clear: both;
}

<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>

Alternate solution is to use display: table-cell; which results in equal height columns.

Summons

another good one, though you don't need the clearing div, because the wrapper is floated it clears (contains the floated column) already ;) – Gristmill

Yes, it's there because I have a habit of adding clear whenever i use floats :) – Summons

@clairesuzy: I now see why I need the clearing div... when the column height is not equal, the clearing div ensures the following items (e.g. footer, or the surprise me button in the fiddle) do not interfere with either columns. – Summons

Thanks, quite right in this case, I was muddling up another layout I use - link - which builds in an overall containing float/wrapper - the above layout can do any number of sidebars at either side - I use it as a base for just about everything ;) sorry I got it confused with yours – Gristmill

this works until I add an <img> inside Sidebar, then for some reason the fluid column wraps down underneath the Sidebar. – Landgrave

above issue fixed - had to adjust the margin-left properties – Landgrave

Answer 2

Here's a solution (and it has some quirks, but let me know if you notice them and that they're a concern):

<div>
    <div style="width:200px;float:left;display:inline-block;">
        Hello world
    </div>
    <div style="margin-left:200px;">
        Hello world
    </div>
</div>

Violent

@Hussein inline-block does work in IE6 and 7 it just needs some help, BUT it's not necessary here I the float is winning, and a display property is ignored when float is used.. I'll check that though – Gristmill

@Gristmill Yeah good catch. And I haven't done css and html stuff in a while, I'll try to be less sloppy and a little better next time. >.< – Violent

no worries, it's a correct solution ;) - after checking: display: inline-block should not be necessary in above code but display:inline might be useful for IE6 and below because of double margin bug - if it's encountered – Gristmill

Answer 3

CSS:

#sidebar {float: right; width: 200px; background: #eee;}
#content {overflow: hidden; background: #dad;}

HTML:

<div id="sidebar">I'm 200px wide</div>
<div id="content"> I take up the remaining space <br> and I don't wrap under the right column</div>

The above should work, you can put that code in wrapper if you want the give it width and center it too, overflow:hidden on the column without a width is the key to getting it to contain, vertically, as in not wrap around the side columns (can be left or right)

IE6 might need zoom:1 set on the #content div too if you need it's support

Gristmill

float: right or float: left with overflow: hidden are the BEST solution as doesn't require calculation on non-float element and support display: none to making slider! Also non-float element propagate its width to all free space! +1 +1 +1 – Rhodie

Answer 4

CSS Solutuion

#left{
    float:right;
    width:200px;
    height:500px;
    background:red;   
}

#right{
    margin-right: 200px;
    height:500px;
    background:blue;
}

Check working example at http://jsfiddle.net/NP4vb/3/

jQuery Solution

var parentw = $('#parent').width();
var rightw = $('#right').width();
$('#left').width(parentw - rightw);

Check working example http://jsfiddle.net/NP4vb/

Keratoplasty

Answer 5

I was recently shown this website for liquid layouts using CSS. http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts (Take a look at the demo pages in the links below).

The author now provides an example for fixed width layouts. Check out; http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width.

This provides the following example(s), http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm (for two column layout like you are after I think)

http://matthewjamestaylor.com/blog/fixed-width-or-liquid-layout.htm (for three column layout).

Sorry for so many links to this guys site, but I think it is an AWESOME resource.

Associationism

This is what I am looking for: matthewjamestaylor.com/blog/… But how do I see the code?? :) – Trustworthy

Right click and view source. Each page pretty much contains the necessary markup and CSS to achieve the result you see on that page. Try resizing the browser for a given page to see how it affects the page. – Associationism

@Silver Light Most modern browsers I've used allow you to use Ctrl+U to view the source. – Violent

Answer 6

I think this is a simple answer , this will split child devs 50% each based on the parent width.

 <div style="width: 100%">
        <div style="width: 50%; float: left; display: inline-block;">
            Hello world
        </div>
        <div style="width: 50%; display: inline-block;">
            Hello world
        </div>
    </div>

Doreathadoreen

Answer 7

#wrapper {
  margin-right: 50%;
}
#content {
  float: left;
  width: 50%;
  background-color: #CCF;
}
#sidebar {
  float: right;
  width: 200px;
  margin-right: -200px;
  background-color: #FFA;
}
#cleared {
  clear: both;
}

<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>

Knives