StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You're using <code>footer p .right</code> and not <code>footer p.right</code> (note the space character). This means the <code>.right</code> and <code>.left</code> classes don't apply to the paragraphs, but to <em>descendant elements inside the paragraph</em>. Or it could also mean a typo, causing your CSS to fail :)</p> <p>Please copy your HTML here, so we can help you better.</p> <hr> <p><strong>Edit:</strong> I see you've now posted your HTML. My assumption turns out to be correct. Get rid of the spaces between <code>p</code> and <code>.left</code>/<code>.right</code>. Also, if you're floating the paragraphs anyway, you can omit the <code>text-align</code> properties.</p> <pre><code>#footer p.left { float: left; } #footer p.right { float: right; } </code></pre> <hr> <p><strong>Edit:</strong> In response to your comment: it should work. Here's a little test case:</p> <pre><code><!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> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload