HTML How to align two words differently in the same line

Question

I have two words on the same line. I want the first word and the second to be aligned to the left and to the right respectively on the same line. Does anyone know how to do this? Thanks

Answer 1

Use a <span> with float: left for the left word, and another <span> with float: right for the right word. There are other alignment techniques as well, but I don't think it's possible without separating the words into their own elements.

Answer 2

Adding on to what Agop said, another way is to have both the elements positioned absolutely in a parent <div> which has relative position. This way, the absolute position will be based on the parent. So right: 0 and left: 0 respectively will be to the left and right of the parent <div> .

See this JSFiddle: http://jsfiddle.net/3ebrcnoL/

Answer 3

You can try this:-

<style type="text/css">
    .maindiv{width:1000px;height:auto;}
    .float_left{float:left;}
    .float_right{float:right;}
</style>
<div class="maindiv">
    <span class="float_left">Leftside</span>
    <span class="float_right">Rightside</span>
</div>