css 2 column layout

Question

I have a basic two column CSS layout, the CSS looks like

#sidebar {
    width:100px;
}
#main {
    margin-left:100px;
}

And some sample html

<div id="content">
  <div id="sidebar">some sidebar content</div>
  <div id="main">some main content</div>
</div>

This works, but it seems repetitive and error prone that the sidebar width needs to match the main's margin-left value. Is there a better way to do this?

Answer 1

You can use the float property on #sidebar:

#sidebar {
    width:100px;
    float: left;
}

JS Fiddle Example

---

However, using the above method, if the content of #main causes its height to extend below #sidebar, it will wrap under the sidebar. To avoid this, use the display:table-cell property:

#sidebar, #main {
    display: table-cell;
}

JS Fiddle Example

Answer 2

CSS

#sidebar { width:100px; float: left; }
#main { float: right; }

HTML

<div id="content">
    <div id="sidebar">my stuff</div>
    <div id="main">some main content</div>
    <div style="clear:both;"></div>
</div>

I recommend 960.gs or BlueprintCSS for basic-html/css styling.