positioning three divs with css
Question
Who likes riddles? ;)
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.
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.
OTHER TIPS
Floats away... not perfect. Chris's answer seems a better solution.
#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;
}
<div id="login">Login</div>
<div id="content">Content</div>
<div id="menu">Menu</div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow