54

I want a container with two columns. Details:

The container

  • Width should adjust to 100% of its parent element (easily accomplished).
  • Height must adjust to contain both columns (i.e. its height should be exactly equal to the larger height of the two columns, so there is no overflow and scrollbars never show)
  • Should have a minimum size equal to double the width of the left column.

The columns in general

  • Should be of variable height, adjusting to the height of their content.
  • Should be side-by-side, such that their top edges are in line.
  • Should not break the layout or wrap under each other if even a single pixel of border, padding, or margin is applied to either one, because that would be extremely unstable and unfortunate.

The left column specifically

  • Must have a fixed, absolute width in pixel units.

The right column specifically

  • Width must fill the remaining space in the container. In other words...
  • Width must equal the container width minus the width of the left column, such that if I place a DIV block element inside this column, set its width to 100%, give it a height of something like 10px, and give it a background color, I will see a 10px high colored strip that goes from the right edge of the left column to the right edge of the container (i.e. it fills the right column's width).

Required stability

The container should be able to resize (by resizing the browser window) down to its minimum width (specified earlier) or to a much larger width without breaking the layout. "Breaking" would include the left column changing size at all (remember it's supposed to have a fixed pixel width), the right column wrapping under the left one, scrollbars appearing, block elements in the right column failing to take up the entire column width, and in general any of the aforementioned specifications failing to remain true.

Background

If floating elements are used, there should be no chance that the right column will wrap under the left one, that the container will fail to contain both columns (by clipping any part of the column or allowing any part of the columns to overflow its boundary), or that scrollbars will appear (so I'd be weary of suggesting the use of anything other than overflow:hidden to trigger floating-element containment). Applying borders to the columns should not break the layout. The content of the columns, especially of the right column, should not break the layout.

There seems to be a simple table-based solution to this, but under every circumstance it fails miserably. For example, in Safari, my fixed-width left column will shrink if the container gets too small, rather than maintaining the width I specified. It also seems to be the case that CSS width, when applied to a TD element refers to a minimum width, such that if something larger is placed inside it, it will expand. I've tried using table-layout:fixed; doesn't help. I've also seen the case where the TD element representing the right column will not expand to fill the remaining area, or it will appear to (for example a third column 1px wide will be pushed all the way to the right side), but putting a border around the right column will show that it's only as wide as its inline content, and block-level elements with their width set to 100% do not fill the width of the column, but rather match the width of the inline-content (i.e. the width of the TD seems to be completely dependent on the content).

One potential solution I have seen is too complex; the solution needs to work in IE8, Firefox 4, and Safari 5.

0

6 Answers 6

83

Here you go:

<html>
<head>
  <title>Cols</title>
  <style>
    #left {
      width: 200px;
      float: left;
    }
    #right {
      margin-left: 200px;
      /* Change this to whatever the width of your left column is*/
    }
    .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <div id="container">
    <div id="left">
      Hello
    </div>
    <div id="right">
      <div style="background-color: red; height: 10px;">Hello</div>
    </div>
    <div class="clear"></div>
  </div>
</body>

</html>

See it in action here: http://jsfiddle.net/FVLMX/

4
  • 2
    This is the ONLY way that works, and it's extremely simple. Summary: a left column with float:left and a fixed pixel width, and a right column with width:auto and a left margin equal to the left column width. Additionally, I set overflow:hidden on the container, because I've seen the right column wrap otherwise. And in order to place child elements with 100% width in the columns, you have to set {box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;} so their padding and border is included in that 100% to prevent overflow.
    – Triynko
    Commented Apr 7, 2011 at 14:40
  • 1
    Is there a way to do this without the clear div? I worked for a shop for a while that had CSS set up that didn't need a the clear div, but I didn't write it. I just used it all the time. Perhaps there's some way to work it into the container div?
    – mtmurdock
    Commented Apr 11, 2014 at 19:59
  • I've spent hours trying snippets from the web that broke in one way or another. The first comment here is right on: this is extremely simple, and it actually works -- even when the content is wider than the viewing area. (And if that happens, you can still scroll to see it!)
    – SirNickity
    Commented Feb 13, 2017 at 21:22
  • The layout breaks when we put <h1>Hello<h1> in the left column.
    – clp
    Commented Nov 8, 2022 at 9:59
21

Try this: Live Demo

display: table is surprisingly good. Once you don't care about IE7, you're free to use it. It doesn't really have any of the usual downsides of <table>.

CSS:

#container {
    background: #ccc;
    display: table
}
#left, #right {
    display: table-cell
}
#left {
    width: 150px;
    background: #f0f;
    border: 5px dotted blue;
}
#right {
    background: #aaa;
    border: 3px solid #000
}
9
  • I guess I didn't read the bottom bit of your post well enough, I just noticed this: "For example, in Safari, my fixed-width left column will shrink if the container gets too small, rather than maintaining the width I specified. It also seems to be the case that CSS width, when applied to a TD element refers to a minimum width, such that if something larger is placed inside it, it will expand. I've tried using table-layout:fixed; doesn't help.". I'll have a look.
    – thirtydot
    Commented Apr 6, 2011 at 23:15
  • What dimensions are we talking about here? What is the width of the left column? And of the whole thing?
    – thirtydot
    Commented Apr 6, 2011 at 23:19
  • Here's a further tweaked version with a silly 2000px wide image: jsfiddle.net/thirtydot/MeFYQ/2 - I hope you provide some feedback :)
    – thirtydot
    Commented Apr 6, 2011 at 23:26
  • Tables just aren't going to work, unfortunately. I tried the display:table/table-row/table-cell thing and it just worked like a regular table where the left column would shrink. You actually posted a non-table solution to this in the comments under another question I asked (stackoverflow.com/questions/5540485/…). See also the solution here, where the author simply declares that his answer is the solution, haha: stackoverflow.com/questions/3568262/…
    – Triynko
    Commented Apr 7, 2011 at 14:53
  • @Triynko: Did you specifically try out the demo I posted in my last comment? Forget about that one, here's a further fixed version with a min-width: jsfiddle.net/thirtydot/MeFYQ/3 - as you asked, I tested it in Firefox 4, Safari 5, IE8 - is there anything wrong with it? I didn't realise you were asking the same question here as in your last one; they seem quite different. And just in case it helps: I solemnly declare that my answer is the solution :)
    – thirtydot
    Commented Apr 7, 2011 at 18:50
0

Piece of cake.

Use 960Grids Go to the automatic layout builder and make a two column, fluid design. Build a left column to the width of grids that works....this is the only challenge using grids and it's very easy once you read a tutorial. In a nutshell, each column in a grid is a certain width, and you set the amount of columns you want to use. To get a column that's exactly a certain width, you have to adjust your math so that your column width is exact. Not too tough.

No chance of wrapping because others have already fought that battle for you. Compatibility back as far as you likely will ever need to go. Quick and easy....Now, download, customize and deploy.

Voila. Grids FTW.

2
  • The links appeared to have moved on since you wrote this answer. The second one is 404, and the first one suggests that you go to unsemantic.com which also claims to solve the problem, but appears to require a download.
    – Teepeemm
    Commented Nov 3, 2021 at 21:40
  • lol @teepeemm, I answered this one 10 years ago. 960.gs is still out there, still absolutely valid. Twitter Bootstrap is another common option these days. They're still dead simple, still a way to go. Commented Nov 3, 2021 at 23:19
0

Over 11 years later. Apply display:grid to the container and divide the available space by grid-template-columns: 100px 1fr. Where 1fr represents a fraction of 100% of the remaining space.

<html>
<head>
  <title>Cols</title>
  <style>
    #container {
      display: grid;
      grid-template-columns: 100px 1fr;
    }
  </style>
</head>

<body>
  <div id="container">
    <div id="left">
      Hello
    </div>
    <div id="right">
      <div style="background-color: red; height: 10px;">Hello</div>
    </div>
  </div>
</body>

</html>

0

As suggested by mtmurdock it is possible to remove the .clear rule and move it to the pseudo-element #container::after.

<html>
<head>
  <title>Cols</title>
  <style>
    #left {
      width: 200px;
      float: left;
    }
    #right {
      margin-left: 200px;
      /* Change this to whatever the width of your left column is*/
    }
    #container::after {
      clear  : left;
      display: block;
      content: '';
    }
  </style>
</head>

<body>
  <div id="container">
    <div id="left">
      Hello
    </div>
    <div id="right">
      <div style="background-color: red; height: 10px;">Hello</div>
    </div>
  </div>
</body>

</html>

0

Another idea is to include the left div in the right div, which in turn coincides with the line container:

[right][left] ... [/left] ..... [/right]

  x    { border: thick solid navy; padding: 2px; } 
  .lineContainer, .container > p {
    padding-left: 100px;
    margin: 0;
    line-height: 1.5;
  }
  .left, em {
    margin-left: -100px;
    display:inline-block; box-sizing: border-box; width: 100px;
    vertical-align: top;
  }
  .div-in-div {
    display:inline-block; box-sizing: border-box; width: 100%;
    vertical-align: top;
  }
<h3>Layout: div-left is contained within the right-div / lineContainer</h3>
<pre>
[right][left] &hellip; [/left] &hellip; [/right]
</pre>
<div class="lineContainer" style="background:floralwhite; "><div class="left">Hello</div>Hello there</div>
<p>Using the above scheme,
we can make old-fashioned typewriter tab stops as shown here.</p>
<h3>The Capital Cities of the UK</h3>
<div class="container" style="background-color: floralwhite; ">
  <p><em>England</em> - The capital is London.</p>
  <p><em>Scotland</em> - The capital is Edinburgh.</p>
  <p><em>Wales</em> - The capital is Cardiff.</p>
  <p><em>Northern Ireland</em> - The capital is Belfast.</p>
  <p><em>The capital of the UK is</em> - London.</p>
  <p><em>Source</em>- Project Britain, capitals.</p>
</div>
<h3>Div in div</h3>
<div class="lineContainer" style="background:floralwhite; ">
  <div class="left">Div in container</div><!--No white space here
  --><p class="div-in-div" style="background: red; font-size: x-large; margin: auto 0; ">Hello there</p>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.