I have next markup:
<div id="lefttop"></div>
<div id="leftbottom"></div>
<div id="central"></div>
I need markup as shown on the picture below:
views:
65answers:
3
+2
A:
#lefttop, #leftbottom {float:left;width:200px;}
#leftbottom {clear:left;}
#central {margin-left:200px;float:right;width: the-width-you-need px}
Come to think of it, width:auto might be the best choice for #central
*edit sorry for all the typos earlier
wheresrhys
2010-02-17 10:54:04
no, it doesn't work. central panel is under leftbottom panel. even when I set huge margin it still displayed under it's correct place.
Roman
2010-02-17 13:04:46
There are a lot of typos in this code, have you fixed those in your test, or have you just copy-pasted everything?
Douwe Maan
2010-02-17 13:10:20
actually, I don't clearly understand why, but you solution works when I don't set margin-left for #central.
Roman
2010-02-17 13:11:11
I think margin-left is not necessary (can't test this at the moment). BTW, you need "float: right" (third line) and a semicolon between "left:width" (first line).
Marcel Korpel
2010-02-17 13:16:00
if you use margin-left you don't need the float:right.
Burntime
2010-02-17 13:58:35
+2
A:
Can you put #lefttop and #leftbottom together in one div? Like
<div id="left-container">
<div id="lefttop"></div>
<div id="leftbottom"></div>
</div>
That way it's easier to get them both on the left.
Marcel Korpel
2010-02-17 13:16:36
A:
This may actually work slightly better for you, as all three divs will scale/shift to match the browser window.
#lefttop {
position: absolute;
top: 10px;
left: 10px;
bottom: 50%;
width: 200px;
margin-bottom: 5px;
}
#leftbottom {
position: absolute;
top: 50%;
left: 10px;
bottom: 10px;
width: 200px;
margin-top: 5px;
}
#central {
position: absolute;
top: 10px;
left: 220px;
bottom: 10px;
right: 10px;
overflow: auto;
}
James Linden
2010-02-17 13:31:34