Cross-browser CSS for left align and right align on the same line

Cross-browser CSS that works to allow both left and right 开发者_开发知识库align of text on the same line?

Example (where each text quote should be aligned as far left or right as possible, respectively):

stuff on the right                                              stuff on the left

• No float's answer's please.. unless there is a way to make the text not break out of the parent div/container in a multicolumn css page...

With container tags:

<div>
  <p style="float: left">stuff on the left</p>
  <p style="float: right">Tstuff on the right </p>
</div>

With inline tags:

<div>
  <span style="float: left">stuff on the left</span>
  <span style="float: right">Tstuff on the right</span>
</div>

float:left for the one on the left, and float:right for the one on the right. Or absolute/relative positioning. Pretty sure both work across the main browers.

Let's assume this is the HTML code:

<div>
  <div id="left" style="float: left">stuff on the left</div>
  <div id="right" style="float: right">Tstuff on the right </div>
</div>

What you can do is use JQuery to find the highest div, then set the #left, #right divs with the highest div. Here's a sample code:

if ($('#left').height()<$('#right').height()) {
  $('#left').height($('#right').height());
} else {
  $('#right').height($('#left').height());
}

Or you can Google with "equal heights jquery" for other solutions.

Without floats:

<div class=container style='width: 100%;'>
  <div class=left-side style='display: inline-block; width: 50%'>
    Stuff on the left
  </div>
  <div class=right-side style='display: inline-block; width: 50%; text-align: right'>
    Stuff on the right
  </div>
</div>