I have been told several times that I shouldn't be using tables for layout design but I constantly find myself going back to them when I can't figure out how to do something.

I need to create a two column layout. The left column is 300px width and the right column takes up the rest of the width on the page. I can't figure out how to properly do this with plain HTML and I can't even quite figure out how to do it with a table either.

In order to have the right column take up the rest of the width it seems that I would need to specify the left column's width with a percentage so that the right column's width can be 100% less the percentage of the left column. But I need the left column to be 300px exactly.

The only thing I can think to do is calculate the right column's width at runtime with JS. Any ideas how I can acplish this without tables and/or without Javascript?

I have been told several times that I shouldn't be using tables for layout design but I constantly find myself going back to them when I can't figure out how to do something.

I need to create a two column layout. The left column is 300px width and the right column takes up the rest of the width on the page. I can't figure out how to properly do this with plain HTML and I can't even quite figure out how to do it with a table either.

In order to have the right column take up the rest of the width it seems that I would need to specify the left column's width with a percentage so that the right column's width can be 100% less the percentage of the left column. But I need the left column to be 300px exactly.

The only thing I can think to do is calculate the right column's width at runtime with JS. Any ideas how I can acplish this without tables and/or without Javascript?

• javascript
• html
• css
• tablelayout

• 2 My go-to in the past: matthewjamestaylor./blog/… – Matt Ball Commented Jan 31, 2013 at 21:02
• 2 You shouldn't be using tables for layout design – Madbreaks Commented Jan 31, 2013 at 21:02
• 3 @Madbreaks thank you for this valuable information... care to explain rather than repeat what I've obviously already been told? – ChevCast Commented Jan 31, 2013 at 21:03
• Have you tried CSS float? – Aaron Kurtzhals Commented Jan 31, 2013 at 21:04
• 1 @AlexFord It is much easier to create fluid layouts with tables. The two problems with using tables is the fact that it's not semantic (tables should contain data), and that it adds bloat to the HTML. However, with CSS 3, you can use regular divs and make them behave like table cells onenaught./posts/201/use-css-displaytable-for-layout If you can't rely on CSS 3 you're going to have to fight your way through floats and margins and a less bloat then tables, but it'll be semantic HTML, or you can just giveupandusetables. – Ruan Mendes Commented Jan 31, 2013 at 21:22

4 Answers 4

Columns are pretty straight forward with floats. The difficulty lies in having the parent container clear the floated children.

<div class="container">
  <div class="column column-a">
    ...
  </div>
  <div class="column column-b">
    ...
  </div>
</div>

.container {
  background-color: red;
  color: white;
  width: 520px;
  zoom: 1;
}
.container:before,
.container:after {
  content: '';
  display: table;
}
.container:after {
  clear: both;
}
.column-a {
  background-color: blue;
  float: left;
  width: 300px;
}
.column-b {
  background-color: green;
  float: right;
  width: 200px;
}

You should note that the shorter of the two columns will not extend to the bottom of the container. Typically the background of both columns is repeated vertically on the containing element.

If you need to pad the columns, I typically add div.inner elements within each .column element, but if you want to avoid "divitis", you can simply add:

.column {
    box-sizing: border-box;
    padding: 20px;
}

For fluid-width columns, all you have to do is make sure your widths add up to 100%:

.column-a {
    width: 80%;
}
.column-b {
    width: 20%;
}

Until we have flexbox layout I would use absolute positioning:

Html:

<div id="container">
    <div id="left">left one</div>
    <div id="right">right one</div>
</div>

CSS:

#container {
    position: relative;
    height: 150px;
}

#left, #right {
    position: absolute;
    top: 0px; 
    bottom: 0px;
}

#left {
    left: 0px; 
    width: 300px;
    background: red;
}

#right {
    left: 300px; 
    right: 0px;    
    background: green;
}

jsfiddle

There are alternatives if you want the layout to adapt to the content instead of the container. If your right column has more content you could use:

#container {
    position: relative;
}

#left {
    position: absolute;
    left: 0px; 
    width: 300px;
    top: 0px; bottom: 0px;
    background: red;
}

#right {
    margin-left : 300px; 
    background: green;
}

jsfiddle

If your left column has more content, use:

#container {
    position: relative;
}

#left {
    width: 300px;
    background: red;
}

#right {
    position: absolute;
    left: 300px; 
    right: 0px;
    top: 0px; bottom: 0px;
    background: green;
}

jsfiddle

<div> elements fundamentally fill their container's width, or what remains of it. So if you have a 300px wide div, then a div next to it with no width specified, the 2nd div will fill the rest of the container.

Set the left column to 300px, set the right column to 100%... done. To avoid any cross browser weirdness, follow Matt Ball's link to... http://matthewjamestaylor./blog/ultimate-2-column-left-menu-pixels.htm . He is using a mysterious 2nd wrapper that I'd deem unnecessary, but baby steps :)

Once you're in the wrapper, to get the column heights = you need to set min-height to 100% I believe. You can adjust the overflow css property to deal with any text overflows. Pretty straight forward stuff, I remember having a hell of a time finding how to do equal columns, the wrapper is the key. Also, don't use JS for this, people who use JS are either doing something more advanced, or are pletely new to html/css.