Reputation: 7421
I need the following layout of divs:
+-----------+-----------+
| | |
| Div A | |
| | |
| | |
+-----------+ Div C |
| | |
| Div B | |
| | |
| | |
+-----------+-----------+
I searched hard, but all I have found are lots of similar questions about placing divs in two columns (like this and this). None seem to deal with this exact problem.
I've tried using float:left
and clear:both
, but I just can't get anywhere.
Obviously it can be achieved using tables, but isn't it bad practice to use tables for layout. Can it be done without?
Upvotes: 1
Views: 1036
Reputation: 517
This should work
<div style="width:100%">
<div id="topLeft" style="float:left; width:50%; height:200px">
</div>
<div id=topRight style="float:right; width:50%; height:400px">
</div>
<div id="bottomLeft" style="float:left; width:50%; width:200px">
</div>
</div>
Upvotes: 2
Reputation: 1355
<div>
<div id="AB-Wrapper" style="float:left;width:50%;">
<div id="DivA">some content</div>
<div id="DivB">some more content</div>
</div>
<div id="DivC" style="float:right;width:50%;">even more content</div>
<div style="clear:both;"><!-- clearer --></div>
</div>
Upvotes: 1
Reputation: 516
If they don't have to be in that order, this should work:
HTML
<div id="container">
<div id="div3"></div>
<div id="div1"></div>
<div id="div2"></div>
</div>
CSS
#container {
width:200px;
}
#div1, #div2 {
width: 100px;
height: 100px;
float: left;
clear: left;
}
#div3 {
height: 200px;
width: 100px;
float: right;
}
#div1 {
background-color: red;
}
#div2 {
background-color: blue;
}
#div3 {
background-color: green;
}
jsfiddle - http://jsfiddle.net/3UTcP/
Upvotes: 1