css pied de page - en essayant de diviser en 2 colonnes

Je suis en train de diviser mon pied de page de sorte qu'il est aligné à gauche et à droite du texte aligné. J'ai la suite mais les deux éléments sont affichés l'un après l'autre:

#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>

Doit être vraiment simple mais je suis sûr que je ne peux pas le faire travailler quelqu'un peut-il offrir à tout conseiller s'il vous plaît?

Grâce

Helen

Aha! J'ai supposé correctement! stackoverflow.com/questions/867587/...
Vérifier ma réponse: stackoverflow.com/questions/1844207/... cela devrait fonctionner.

OriginalL'auteur Helen | 2009-05-15

  1. 8

    Vous utilisez footer p .right et pas footer p.right (notez le caractère espace). Cela signifie que le .right et .left classes ne s'applique pas pour les paragraphes, mais à descendant des éléments à l'intérieur du paragraphe. Ou cela pourrait également signifier une faute de frappe, à l'origine de votre CSS à l'échec 🙂

    S'il vous plaît copiez votre code HTML ici, afin que nous puissions mieux vous aider.

    Edit: je vois que vous avez posté votre code HTML. Mon hypothèse s'avère être correct. Se débarrasser des espaces entre p et .left/.right. Aussi, si vous êtes flottant paragraphes de toute façon, vous pouvez omettre le text-align propriétés.

    #footer p.left {
 float: left;
}

#footer p.right {
 float: right;
}

    Edit: En réponse à votre commentaire: il devrait fonctionner. Voici un petit cas de test:

    <!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>
    merci pour votre post, j'ai copié le code, comme l'a suggéré alors maintenant ont #footer { clear: both; background-color: #330066; padding: .5em; font-size: 0.8 em; color: #000; } #footer p.gauche { float: left; } #footer p.droit { float: right;} html (toujours la même posté) cela affiche le texte en dessous du pied de page?!?
    J'ai édité mon post en réponse à votre commentaire.
    ok, vous avez raison, cela ne fonctionne toutefois PAS avec IE8. Lors de l'exécuter en mode de compatibilité le pied de page rend bien avec le texte à l'intérieur des frontières, mais dans IE8 en mode le texte s'affiche en dessous du pied de page div.

    OriginalL'auteur Mathias Bynens

  2. 1

    avez-vous essayé de réglage de la largeur de la gauche et la droite, par exemple, 50% de chaque

    OriginalL'auteur bumperbox

  3. 1

    Pas besoin de retirer le clear:both sur le #pied de page, comme proposé précédemment.
    Comme l'a dit Mathias Bynens, vous devez écrire "p.de gauche" au lieu de "p .de gauche"
    Vous aurez besoin d'un ressort à la fois après les deux paragraphes et à la fin avec quelque chose comme :

    #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>

    OriginalL'auteur Daniel

  4. 0

    Que les paragraphes sont des éléments de niveau bloc, si vous souhaitez les afficher côte à côte, vous devez supprimer les chars et les mettre à être en ligne:

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

    Aussi je suppose que ce doit être soit #pied de page ou .le pied de page à l'avance?

    OriginalL'auteur Sliff

  5. 0

    Problème est que sur votre #footer vous avez un clear: both; qui tue tous les flotteurs.

    Il serait mieux si vous avez:

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

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

    La width: 100%; et la overflow: hidden; va résoudre votre problème, il efface la flotte après ils sont faits.

    Avec le code ci-dessus, vous serez en mesure d'avoir juste:

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

    OriginalL'auteur janhartmann