CSS - Trouble aligning text elements on the same line - html

Question

I am trying to create a footer bar which has a text element aligned on the left and one thats aligned to the right, however I'm having some difficulty.
This is what I have so far:
HTML
<div id="footer_bar">
<div id="footer_bar_content">
<p>
Left Text
</p>
<p class="align_right">
Right Text
</p>
</div>
</div>
CSS
#footer_bar
{
width:100%;
position:absolute;
margin:0;
bottom:0;
height:30px;
border-top:2px #eeeeee solid;
background-color:#f7f7f7;
}
#footer_bar_content { padding-left:15%; padding-right:15%; }
#footer_bar_content p { line-height:30px; margin:0; color:#222; font-size:11px; display:inline; }
.align_right { text-align:right; width:100%; }
Please could someone help me work out what is wrong? The align_right class doesn't appear to have any effect.

Answer 1

Is this what you are looking for. Take a look at fiddle. http://jsfiddle.net/GD8tL/1/
Use float instead of align
#footer_bar
{
width:100%;
position:absolute;
margin:0;
bottom:0;
height:30px;
border-top:2px #eeeeee solid;
background-color:#f7f7f7;
}
#footer_bar_content { padding-left:15%; padding-right:15%; }
#footer_bar_content p { line-height:30px; margin:0; color:#222; font-size:11px; display:inline; }
.align_right{ float:right;}

Answer 2

#footer_bar_content p.align_right {float:right; width:100%;}
Try this if you want your text on the right side, and play a bit with the width, because you want to give 100% of the main div's width, which is the whole place, so probably it will be displayed in new line.

Answer 3

<div id="footer_bar">
<div id="footer_bar_content">
<p>
Left Text
<span style="float: right;">
Right Text
</span>
</p>
</div>
</div>

Answer 4

You must remove width = 100% in class align_right and use "float: right" instead of "text-align:right"
CSS:
.align_right { float:right;}
Code: JSFIDDLE

Answer 5

instead of paragraph you should take left.. similar for right and use .left{float:left} and .right{float:right} then .footer_bar_content:after{clear:both} will work for u

Answer 6

You can try float right or left accordingly,
Html
<div id="footer_bar">
<div id="footer_bar_content">
<p class="left">
Left Text
</p>
<p class="right">
Right Text
</p>
</div>
</div>
StyleSheet
#footer_bar
{
width:100%;
position:absolute;
margin:0;
bottom:0;
height:30px;
border-top:2px #eeeeee solid;
background-color:#f7f7f7;
}
#footer_bar_content { padding: 0 15%; }
#footer_bar_content p { line-height:30px; margin:0; color:#222; font-size:11px; display:inline; }
.right { float:right; }
.left { float:left; }
Here is the Demo