Aligning left and right in a simple footer
- by Wolfram
I'm currently working on a simple footer, and I would like to align one line of text left and the other to the right.
This is what I have so far:
<div id="footer">
Last Updated: October 15, 2012 <!--left align-->
Contact Us Login <!--right align (these will be links)-->
</div>
#footer {
font-family: Arial;
font-size: .9em;
color: #24ACAE;
border-top: 1px solid #24ACAE;
margin-left: 90px;
margin-right: 90px;
padding-top: 5px;
}
The above code results in the two lines of text being next to each other and I've tried various ways of fixing this such as putting the the 2nd line in a span and aligning right and even putting the lines into a table. None of what I have tried has resulted in both lines being properly aligned.
Using a margin-left alone does not work because when the first line is updated and becomes longer, it will push the second line downwards. Relative positioning seems to have the same issue.
Hopefully there's something simple that I'm overlooking.