text on left and right side of element

Question

Using CSS what is the best way to have text on both the right and the left side of an element and be in the same spot vertically?

Thus ending up with the following layout:

The container has a fixed width, so I don't want to use positioning, because I know I don't have to.

Answer 1

(1) Add two divs within the element that contain each text string

<div>
    <div class="div1">Left Text</div>
    <div class="div2">Right Text</div>
</div>

(2) Float the two divs next to each other

.div1 {
    float: left;
}

.div2 {
    float:right;
}

(3) Set the text-align properties for the right div (this will ensure that the text is pushed all the way to the right as in your example).

.div2 {
    float:right;
    text-align: right;
}

Answer 2

You can place your two items inside the same container and float them into the right position.

So you might have something like:

<div class="container">
   <div class="item1">Item 1</div>
   <div class="item2">Item 2</div>
</div>

and CSS:

.container{width:500px;}

.item1, item2{width:200px;}
.item1{float:left;}
.item2{float:right;}

Example: http://jsfiddle.net/7Wvhj/1/