CODEWITHSUNDEEP
htmlcss
KingPolygon
KingPolygon

Reputation: 4755

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

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;

}

Upvotes: 2

Views: 75661

Answers (5)

Agustin Meriles
Agustin Meriles

Reputation: 4854

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.

Upvotes: 12

Arbel
Arbel

Reputation: 30999

Do this: (Add the floats to your css)

.copyright {
 float:left;
 text-align: left;
}

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

Upvotes: 1

metadept
metadept

Reputation: 7949

Just change your text-align to float for both .copyright and .social and you're golden.

EDIT Here's a jsFiddle demo with some unnecessary stuff removed: http://jsfiddle.net/kc6AL/6/

Upvotes: 3

Naji Shmly
Naji Shmly

Reputation: 311

just add display: inline; to your h3 element. see this: http://jsfiddle.net/kc6AL/3/

for more information: http://learnlayout.com/display.html

Upvotes: 0

Scott
Scott

Reputation: 21882

I would simply use one h3 and float the social icons within that head tag.

Updated fiddle

<h3 class="copyright"><span class="social">Social Links.</span>Copyright Stuff.</h3>

CSS

.social { float: right; }

Upvotes: 0

Related Questions