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?

Short answer? [Yes](http://www.snook.ca/archives/html_and_css/getting_your_di) — Khez, Apr 13 '11 at 07:58

score 87 · Accepted Answer · edited May 23 '17 at 12:10

87

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.

edited May 23 '17 at 12:10

Community

1
1

answered Apr 13 '11 at 08:42

Salman A

262,204
82
430
521

another good one, though you don't need the clearing div, because the wrapper is floated it clears (contains the floated column) already ;) – clairesuzy Apr 13 '11 at 08:49
Yes, it's there because I have a habit of adding clear whenever i use floats :) – Salman A Apr 13 '11 at 08:53
@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. – Salman A Apr 13 '11 at 09:38
Thanks, quite right in this case, I was muddling up another layout I use - [link](http://ago.tanfa.co.uk/css/layouts/flexi_floats/) - 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 – clairesuzy Apr 13 '11 at 09:49
1

this works until I add an inside Sidebar, then for some reason the fluid column wraps down underneath the Sidebar. – Mike W Mar 03 '17 at 19:35
above issue fixed - had to adjust the margin-left properties – Mike W Mar 03 '17 at 19:41

leetNightshade · Answer 2 · 2011-04-13T08:16:06.317

12

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>

edited Apr 13 '11 at 08:16

answered Apr 13 '11 at 08:02

leetNightshade

2,673
2
36
47

1

@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 – clairesuzy Apr 13 '11 at 08:30
@clairesuzy 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. >. – leetNightshade Apr 13 '11 at 08:35
2

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 – clairesuzy Apr 13 '11 at 08:38

score 6 · Answer 3 · answered Apr 13 '11 at 08:18

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

**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 — gavenkoa, May 13 '13 at 14:37

Hussein · Answer 4 · 2011-04-13T08:37:00.137

5

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/

edited Apr 13 '11 at 08:37

answered Apr 13 '11 at 08:00

Hussein

42,480
25
113
143

score 1 · Answer 5 · answered Jun 03 '15 at 03:35

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>

score 1 · Answer 6 · answered Apr 13 '11 at 08:01

1

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.

answered Apr 13 '11 at 08:01

Mr Moose

5,946
7
34
69

This is what I am looking for: http://matthewjamestaylor.com/blog/ultimate-3-column-blog-style-pixels.htm But how do I see the code?? :) – Silver Light Apr 13 '11 at 08:10
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. – Mr Moose Apr 13 '11 at 08:16
1

@Silver Light Most modern browsers I've used allow you to use Ctrl+U to view the source. – leetNightshade Apr 13 '11 at 08:34

score -1 · Answer 7 · answered Aug 23 '17 at 23:56

#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>

Two column div layout with fluid left and fixed right column

7 Answers7

Linked