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

Question

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...

Answer 1

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>

Answer 2

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.

Answer 3

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.

Answer 4

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>