<p>I have three <code>divs</code>:</p>

<pre><code>&lt;div id="login" /&gt;
&lt;div id="content" /&gt;  
&lt;div id="menu" /&gt;  
</code></pre>

<p>How would I define the CSS styles (without touching the HTML) to have the <code>menu-div</code> as the left column, the <code>login-div</code> in the right column and the <code>content-div</code> also in the right column but below the <code>login-div</code>.</p>

<p>The <code>width</code> of every div is fixed, but the <code>height</code> isn't.</p>

```
```
#menu {
  position:absolute;
  top:0;
  left:0;
  width:100px;
}
#content, #login {
  margin-left:120px;
}
```
```
Why this way?  The menu coming last in the markup makes it tough.  You might also be able to float both content and login right, and added a clear:right to content, but I think this might be your best bet.  Without seeing the bigger picture, it is hard to give a solution that will definitely work in your case.
EDIT: This seems to work as well:
```
```
#content, #login {
  float:right;
  clear:right
}
```
```
More thoughts:  The absolute positioning won't work (or won't work well) if you want to have the columns in a centered layout.  The float seems to work - as long as you can get any border-between-columns type requirements to pan out with the float solution, you might be better off choosing that.  Then again, if the site is supposed to be left align, I think that the absolute method would work very well for your needs.