ansaurus

Question

css footer - trying to split into 2 columns

Answer 1

+1 A:

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

bumperbox 2009-05-15 08:39:07

Answer 2

+6 A:

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 child 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 PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="en">
 <head>
  <title>Test case for the CSS footer problem</title>
  <style type="text/css">
   #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/questions/867587/css-footer-trying-to-split-into-2-columns" title="Stack Overflow: CSS footer; trying to split into two columns">http://stackoverflow.com/questions/867587/css-footer-trying-to-split-into-2-columns&lt;/a&gt; for details.
  <div id="footer">
   <p class="left">Copyright © 2009</p>
   <p class="right">Designed by xxxxxx</p>
  </div>
 </body>
</html>

Mathias Bynens 2009-05-15 08:39:58

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 2009-05-15 14:21:33

I edited my post in response to your comment.

Mathias Bynens 2009-05-15 16:09:41

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 2009-06-08 13:21:05

Answer 3

A:

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?

Sliff 2009-05-15 08:44:15

Answer 4

A:

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>

meep 2009-05-15 08:51:22

Answer 5

+1 A:

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>

Daniel 2009-05-15 09:06:52

Answer 6

A:

huge thanks :)

2009-08-31 19:52:11

Answer 7

A:

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 2009-12-04 01:38:55

Answer 8

A:

I have come to this part too and after getting all tied up in CSS and DIV ids, I am studying your posts here now... It was so much easier with the table tag. But I am going to do it the DIV way for the sake of faster loading times.

Patrick Swanson 2010-10-31 12:11:32

ansaurus

tags:

views:

answers:

css footer - trying to split into 2 columns

related questions