ansaurus

Question

Answer 1

+6 A:

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

Chris Marasti-Georg 2008-09-25 15:54:05

Thanks a lot! I used the floating-approach. The clear:right in the content-div did the trick for me.

Thomas Danecker 2008-09-25 16:07:54

Answer 2

A:

Floats away... not perfect. Chris's answer seems a better solution.

<html>
    <head>
     <title>test</title>
     <style>
      #login {
       float: right;
       width: 400px;
       border: 1px solid #f00;
      }
      #content {
       clear: right;
       float: right;
       width: 400px;
       border: 1px solid #f00;
      }
      #menu {
       float:left;
       width: 400px;
       border: 1px solid #f00;
      }
     </style>
    </head>
    <body>
     <div id="login">Login</div>
     <div id="content">Content</div>
     <div id="menu">Menu</div>
    </body>
</html>

enobrev 2008-09-25 15:57:19

Answer 3

A:

YUI Grids is your friend for challenges like these (and many others):

http://developer.yahoo.com/yui/grids/

Kent Brewster 2008-09-25 16:41:50

ansaurus

tags:

views:

answers:

positioning three divs with css

related questions