Jay Taylor's notes

back to listing index

How to make a stable two column layout in HTML/CSS

[web search]
Original source (stackoverflow.com)
Tags: css layout stackoverflow.com
Clipped on: 2016-12-02

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; I couldn't care less about IE6, as long as it works in IE8, Firefox 4, and Safari 5.

asked Apr 6 '11 at 22:44
Image (Asset 3/7) alt=
Triynko
8,4901356100
up vote 48 down vote accepted

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/

answered Apr 6 '11 at 23:23
Image (Asset 5/7) alt=
richzilla
7,92293262
   upvote
  flag
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-bo‌​x-sizing: border-box;-ms-box-sizing: border-box;} so their padding and border is included in that 100% to prevent overflow. – Triynko Apr 7 '11 at 14:40
3 upvote
  flag
@Triynko: Are you kidding me? This + border-box is all you wanted?!? You made it sound like you wanted some super bulletproof equal height column wtf-layout. – thirtydot Apr 7 '11 at 20:51
   upvote
  flag
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 Apr 11 '14 at 19:59

I could care less about IE6, as long as it works in IE8, Firefox 4, and Safari 5

This makes me happy.

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
}
answered Apr 6 '11 at 23:08
Image (Asset 6/7) alt=
thirtydot
155k31282287
   upvote
  flag
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 Apr 6 '11 at 23:15
   upvote
  flag
What dimensions are we talking about here? What is the width of the left column? And of the whole thing? – thirtydot Apr 6 '11 at 23:19
   upvote
  flag
Here's a further tweaked version with a silly 2000px wide image: jsfiddle.net/thirtydot/MeFYQ/2 - I hope you provide some feedback :) – thirtydot Apr 6 '11 at 23:26
   upvote
  flag
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 Apr 7 '11 at 14:53
   upvote
  flag
@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 Apr 7 '11 at 18:50

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.

answered Apr 6 '11 at 22:49
Image (Asset 7/7) alt=
bpeterson76
11k43072

Your Answer

asked

5 years ago

viewed

68351 times

active

2 months ago
Blog
Featured on Meta

Hot Network Questions

Technology Life / Arts Culture / Recreation Science Other
  1. Stack Overflow
  2. Server Fault
  3. Super User
  4. Web Applications
  5. Ask Ubuntu
  6. Webmasters
  7. Game Development
  8. TeX - LaTeX
  1. Software Engineering
  2. Unix & Linux
  3. Ask Different (Apple)
  4. WordPress Development
  5. Geographic Information Systems
  6. Electrical Engineering
  7. Android Enthusiasts
  8. Information Security
  1. Database Administrators
  2. Drupal Answers
  3. SharePoint
  4. User Experience
  5. Mathematica
  6. Salesforce
  7. ExpressionEngine® Answers
  8. Cryptography
  1. Code Review
  2. Magento
  3. Signal Processing
  4. Raspberry Pi
  5. Programming Puzzles & Code Golf
  6. more (7)
  1. Photography
  2. Science Fiction & Fantasy
  3. Graphic Design
  4. Movies & TV
  5. Music: Practice & Theory
  6. Seasoned Advice (cooking)
  7. Home Improvement
  8. Personal Finance & Money
  1. Academia
  2. more (8)
  1. English Language & Usage
  2. Skeptics
  3. Mi Yodeya (Judaism)
  4. Travel
  5. Christianity
  6. English Language Learners
  7. Japanese Language
  8. Arqade (gaming)
  1. Bicycles
  2. Role-playing Games
  3. Anime & Manga
  4. Motor Vehicle Maintenance & Repair
  5. more (17)
  1. MathOverflow
  2. Mathematics
  3. Cross Validated (stats)
  4. Theoretical Computer Science
  5. Physics
  6. Chemistry
  7. Biology
  8. Computer Science
  1. Philosophy
  2. more (3)
  1. Meta Stack Exchange
  2. Stack Apps
  3. Area 51
  4. Stack Overflow Talent
site design / logo © 2016 Stack Exchange Inc; user contributions licensed under cc by-sa 3.0 with attribution required
rev 2016.12.2.4279