Why should I provide a floating column

How to create a stable two-column layout in HTML / CSS

I want a container with two columns. Details:

The container

  • The width should adjust to 100% of the parent element (easy to reach).
  • The height needs to be adjusted to include both columns (i.e. their height should be exactly the same as the larger height of the two columns so that there is no overflow and scroll bars never appear).
  • Should have a minimum size that is twice the width of the left column.

The columns in general

  • Should be of variable height and adapt to the height of its content.
  • Should be next to each other so that their tops are in line.
  • Shouldn't the layout break or wrap between each other if only one pixel margin, spacing or border is applied to either pixel as this would be extremely unstable and unfortunate.

The left column specifically

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

The right column specifically

  • The width must fill the remaining space in the container. In other words...
  • The width must be equal to the width of the container minus the width of the left column. So if you put a DIV block element in this column, set the width to 100%, enter a height of around 10px, and enter a background color. I see a 10px high color stripe running from the right edge of the left column to the right edge of the container (i.e. filling the width of the right column).

Required stability

The container should be able to resize (by resizing the browser window) to the minimum width (specified earlier) or to a much larger width without breaking the layout. "Breaking" would involve changing the size of the left column at all (remember it should be a fixed pixel width), breaking the right column below the left, scrolling bars appearing, and block items in the right column not all Occupy column width and in general one of the above specifications is not retained.


If floating elements are used, there should be no chance that the right column will wrap below the left, that the container will not contain both columns (by truncating part of the column or by overflowing some of the columns), or that scroll bars appear (so I'd be tired of suggesting the use of anything other than overflow: hidden to trigger the containment of floating items). Applying borders to the columns shouldn't break the layout. The content of the columns, especially the right column, should not break the layout.

There seems to be a simple table-based solution, but it fails miserably under any circumstances. For example, Safari shrinks the left fixed-width column when the container becomes too small instead of keeping the specified width. It also seems to be the case that when the CSS width is applied to a TD) element, it refers to a minimum width, so it expands when something larger is placed in it. Use the table layout: fixed, helps Not. I have also seen the case that the TD element that represents the right column does not expand to fill the remaining area, or it appears (for example, a third column that is 1 pixel wide is moved all the way to the right.) However, if you put a border around the right column, it shows that it is only as wide as the inline content and block-level elements that are set to 100% do not fill the width of the column, but match the width of the Inline content match (i.e. the width of the TD seems to be entirely content dependent).

One possible solution I've seen is too complex; I don't care about IE6 as long as it works in IE8, Firefox 4, and Safari 5.