css footer - trying to split into 2 columns

Question

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

Aha! I assumed correctly! http://stackoverflow.com/questions/867587/css-footer-trying-to-split-into-2-columns/867599#867599 — Mathias Bynens, May 15 '09 at 09:07
Check my answer in: http://stackoverflow.com/questions/1844207/how-to-make-a-div-to-wrap-two-float-divs-inside/1844291#1844291 That should work. — lepe, Dec 04 '09 at 01:38

Mathias Bynens · Answer 1 · 2013-11-06T13:28:18.807

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>

thanks for your post, I copied the code as suggested so now have #footer { clear: both; background-color: #330066; padding: .5em; font-size: 0.8em; color: #000; } #footer p.left { float: left; } #footer p.right { float: right; } (html still the same as posted) this displays the text underneath the footer?!? — Helen, May 15 '09 at 14:21
ok, you are right, this does work, however NOT in IE8. When run in compatability mode the footer renders OK with the text within the borders but in IE8 mode the text displays underneath the footer div. — Helen, Jun 08 '09 at 13:21

score 1 · Answer 2 · answered May 15 '09 at 08:39

1

have you tried setting a width for the left and right, eg 50% each

answered May 15 '09 at 08:39

bumperbox

10,166
6
43
66

score 1 · Answer 3 · answered May 15 '09 at 09:06

No need to remove the clear:both on the #footer as suggested before. As said Mathias Bynens you must write "p.left" instead of "p .left" You will need a clear both after the two paragraphs and end up with something like :

#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 style="clear:both"></div>
</div>

Sliff · Answer 4 · 2009-05-15T08:50:24.873

0

As paragraphs are block level elements, if you wish them to be displayed side by side you should remove the floats and set them to be inline:

footer p.left {text-align:left; display:inline; }
footer p.right {text-align:right; display:inline; }

Also I assume that should be either #footer or .footer beforehand?

edited May 15 '09 at 08:50

answered May 15 '09 at 08:44

Sliff

678
6
10

janhartmann · Answer 5 · 2009-05-15T08:59:58.907

Problem is that on your #footer you have a clear: both; which kills all floats.

It would be better if you have:

#footer {
    background-color: #330066; 
    padding: .5em; 
    font-size: 0.8em; 
    color: #fff;
    width: 100%;
    overflow: hidden;
 }

p.left { float: left; }
p.right { float: right; }

The width: 100%; and the overflow: hidden; will fix your problem, as it clears the floats after they are made.

With the code above you will be able just to have:

<div id="footer">
    <p class="left">Copyright &copy; 2009</p>
    <p class="right">Designed by ****</p>
</div>

css footer - trying to split into 2 columns

5 Answers5