Positioning three divs with css

css, html, layout

Solution

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

Problem

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.

Original source