Question

I have three divs:

<div id='login' /> <div id='content' />   <div id='menu' />   

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

The width of every div is fixed, but the height isn’t.

Answer 1

#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.