Menu
I'm trying to split my footer so that there is left aligned and right aligned text. I have the following but the two elements are displaying one after the other:
#footer {
clear: both;
background-color: #330066;
padding: .5em;
font-size: 0.8em;
color: #fff;
}
#footer p .left {
text-align:left;
float:left;
}
#footer p .right {
float:right;
text-align:right;
}
<div id="footer">
<p class="left">
Copyright © 2009
</p>
<p class="right">
Designed by xxxxxx
</p>
</div>
Should be really simple I'm sure but I just can't get it working - can anyone offer any advise please?
Thanks
Helen
829
You're using footer p .right and not footer p.right (note the space character). This means the .right and .left classes don't apply to the paragraphs, but to descendant elements inside the paragraph. Or it could also mean a typo, causing your CSS to fail :)
Please copy your HTML here, so we can help you better.
Edit: I see you've now posted your HTML. My assumption turns out to be correct. Get rid of the spaces between p and .left/.right. Also, if you're floating the paragraphs anyway, you can omit the text-align properties.
#footer p.left {
float: left;
}
#footer p.right {
float: right;
}
Edit: In response to your comment: it should work. Here's a little test case:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test case for the CSS footer problem</title>
<style>
#footer { width: 300px; outline: 1px solid red; }
#footer p.left { float: left; }
#footer p.right { float: right; }
</style>
</head>
<body>
<p>See <a href="http://stackoverflow.com/a/867599/96656" title="Stack Overflow: CSS footer; trying to split into two columns">http://stackoverflow.com/a/867599/96656</a> for details.
<div id="footer">
<p class="left">Copyright © 2009</p>
<p class="right">Designed by xxxxxx</p>
</div>
</body>
</html>
have you tried setting a width for the left and right, eg 50% each
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
