Basic CSS question

Question

In CSS, how do I achieve the following layout?

xxxxxxxxxxxxxR1xxxxxxxxxxxxx
xxxxxxxxxxxxxR1xxxxxxxxxxxxx
xxxxxxxxxxxxxR1xxxxxxxxxxxxx

xR2.1x   xxxxxxxxxR2.1xxxxxx
xR2.1x   xxxxxxxxxR2.2xxxxxx
xR2.1x   xxxxxxxxxR2.2xxxxxx

xxxxxxxxxxxxxR3xxxxxxxxxxxxx
xxxxxxxxxxxxxR3xxxxxxxxxxxxx
xxxxxxxxxxxxxR3xxxxxxxxxxxxx

R2.1 is an image that I want to go to the left, and R2.2 is a div that I want to go to the right.

If R2.2 was a paragraph, it would be easy - I could just use float:left on R2.1 - but the fact that it is a div seems to mess things up.

I've tried using <img style="float:left;"> and <div style="float:right">, together and separately, but they don't seem to combine well.

What am I doing wrong?

Answer 1

Try:

<div style="margin-left: [width of picture]">

Answer 2

The floats should work as expected. Make sure you add a clear:both to the R3 div, so it knows it should start beneath the floating divs, and that the left/right divs have the correct widths so they aren't pushed to a new line. Example:

<div>r1</div>
<img style="float:left;" alt="r2.1" />
<div style="float:right;">r2.2</div>
<div style="clear:both;">r3</div>​​​​​​​​​​​​​​​​

http://jsfiddle.net/wHm8n/

Answer 3

Is there any reason you can't put the image inside the second div? That would sort it out:

<div id="r1" style="height:100px; background-color:#eff;">r1r1r1r1r1r1r1r1r1r1</div>
<div id="r2" style="height:100px; background-color:#efe;">r2r2r2r2r2r2r2r2r2r2
   <div id="image" style="width:160px;height:100px;background-color:#ff8;float:left">
   </div>
</div>
<div id="r3" style="height:100px; background-color:#fee;">r3r3r3r3r3r3r3r3r3r3</div>

http://jsfiddle.net/WP6bc/1/

Answer 4

There is no need to use float:right on the right side, just use float:left and margin:

<div>r1</div>
<img style="float:left; width:50px; height:50px;" title="r2.1" />
<div style="margin-left:50px;">r2.2</div>
<div style="clear:both;">r3</div>​