CSS Question with Divs and Spans

[Rhino1272]

What is the best way using divs and/or spans to replace the following table structure?

<table style="width:100%">
    <tr>
        <td style="text-align:right;">Right Button</td>
    </tr>
    <tr>
        <td style="text-align:left;">Left Button</td>
    </tr>
</table>

I have tried using

<div style="float:right">Right Button</div>
<div style="float:left">Left Button</div>

But that causes the two button to be on the same line. What I want is the Right Button to be on the top line and the Left Button to be on the bottom line.

So far the only way that I have accomplished this is by using text-align:

<div style="text-align:right">Right Button</div>
<div style="text-align:left">Left Button</div>

However, I have read on the web that I should never be using text-align with divs. What is the proper way of doing this?

[Airshow]

Rhino,

Your version-3 is fine because you are aligning text.

The issue with text-align and block elements (not just <div>) is that the various browsers render differently if you try to use text-align:center or text-align:right to control the position of a block element itself within a wider, containing block element.

There is a CSS technique involving position , left and margin-left to center a block element of known width reliably. Although I've never tried it, I guess that a variant of this technique would reliably right align.

Airshow