align left and right with float: works in FF/IE but not in Chrome?

Question

I'm using this

.align-left {
   float: left;
   width: 49%;
   }
.align-right {
   float: right;
   width: 49%;
   text-align: right; /* depends on element width */
   }

With this html:

<span class="align-left">this shows to the left<span><span class="align-right">this to the right<span>

And it works fine in IE/FF but not in Chrome? I'm no CSS expert but I'd like to avoid using tables, any suggestions?

Answer 1

Close your span tags and it will work.

See example: http://jsfiddle.net/ESQE7/

Answer 2

Why don't you better try something like this ?

<div style="float:left">left</div>
<div style="float:right">right</div>

I think this might work for you.

Keep me posted.