How to Align Footer Text on the Right and on the Left?

css, html

Solution

I've forked your jsfiddle:

http://jsfiddle.net/82ZU8/

the key here is to float the `<h3/>`s

CSS

.copyright {
    float: left;
}

.social { 
    float: right;
}

HTML

<!--Footer-->
<div id="footer">
    <h3 class="copyright">Copyright Stuff.</h3>
    <h3 class="social">Social Links.</h3>
    <div style="clear: both"></div>
</div>

Note that you must clear the floated blocks, so the footer div will be fixed.

The reason that the text-align approach doesn't work in the way you will expected, is because `<h3 />` is a block element, so it will fill the entire width and causing the next `h3` to go to next "line". Giving the `float` to a block element, will cause the element to shrink to its content and allowing other elements to be aside of it.

Problem

I'm trying to align text on the left and on the right side of my footer. The problem is that the text on the right falls a line below the text on the left. I want them to be even on the same line. Any help would be appreciated! Thanks for the help! Here's my code: http://jsfiddle.net/kc6AL/ HTML ``` <!--Footerline--> <div id="footerline"> <img src="http://s21.postimg.org/l6t6akypj/line.jpg"/> </div> <!--Footer--> <div id="footer"> <h3 class="copyright">Copyright Stuff.</h3> <h3 class="social">Social Links.</h3> ``` CSS ``` #footerline { width: 100%; overflow: hidden; margin: 5px auto 10px auto; text-align: center; } #footer { max-width: 980px; text-align: center; margin: auto; } h3 { font-family: 'Source Sans Pro', sans-serif; text-transform:uppercase; font-weight : 300; font-size : 14px; color : #000; } .copyright { text-align: left; } .social { text-align: right; } ```

Original source