CSS Positioning - Best Way To Position - css

Question

Whats' the best way to position? Float, Relative, Absolute?
Lets say I want to position something like this:
How do I position something like this and what's the best way to do it?
Float, Relative, Absolute?

Answer 1

If you want a fluid layout, use floats.
Positioning elements relative/absolute causes them to display as inline therefore a height/width is required and they then become non-fluid.

Answer 2

You would have to create a div that acts as a container
Then create three more divs one for the right side and two for the left side.
I have created a jSfiddle file for you to reference. Something quick I created
http://jsfiddle.net/wSp7F/
It all depends on which type of layout you are going for. Responsive, Fluid or Fixed.
HTML
<div id="container">
<div id="rightside">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="leftside">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="leftside">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>​
CSS
#container {width:500px;position:relative;overflow:Hidden;outline:1px solid red}
.leftside {float:left;width:225px;margin:0 0 5px 0}
#rightside {float:right;width:200px}
.leftside,#rightside {outline:1px solid black;padding:5px}
​

Answer 3

There isn't a single best way, but here's how I'd do it.
http://jsfiddle.net/Wuj35/
HTML
<div id="wrapper">
<div id="div3">div 3</div>
<div id="div1">div 1</div>
<div id="div2">div 2</div>
</div>
CSS
#wrapper{
width:450px;
}
#div1,
#div2,
#div3{
float:left;
margin:1em;
padding:1em;
border:5px solid #000;
border-radius:8px;
}
#div1,
#div2{
width:150px;
height:75px;
}
#div2{
clear:left;
}
#div3{
float:right;
width:150px;
height:225px;
}