Align 2 span one left and the other right inside a div

Question

Could anybody write the CSS fragment to do this?

<div class="container">
  <span class="left">Left</span><span class="right">Right</span>
</div>

Here's the CSS for .container:

.container {
    position:absolute;
    bottom:0;
    margin: 0 5px 5px 5px;
}

Notice the position is absolute because it is "absolute positionated" on its containing element.

I've alredy tried float:left/float:right on the two nested elements but nothing happens.

Answer 1

Set the elements to block, set a width and float them.

.left{
  display: block;
  float:left;
  width: 100px;
}

.right{
  display: block;
  float:right;
  width: 100px;
}

Example: http://jsfiddle.net/LML2e/