Question

I want to have a few divs one below the next one.
Some divs I want to align them right.
If I use float:right I fail because the next divs are pretty much aligned with them.

so to achieve this:

<div>...[left]...</div>
<div>...[right]...</div>
<div>...[left]...</div>

I have ended up with using a table:

<div>...[left]...</div>
<table width='100%'>
<tr>
<td align=right>...[right]...</td>
</tr>
</table>
<div>...[left]...</div>

Surely I could do better than this.
But how ?
Can somebody help ?

p.s.
note [left] and [right] denote some other html elements – not just simple text for which text-align would do the trick

Answer 1

I think you’re looking for the clear property: check out this jsfiddle demo.