css footer - essayant de diviser en 2 colonnes

J'essaie de diviser mon pied de façon à ce qu'il y ait du texte aligné à gauche et aligné à droite. Je les éléments suivants, mais les deux éléments affichent un après l'autre:css footer - essayant de diviser en 2 colonnes

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

devrait être très simple, mais je suis sûr que je ne peux pas le faire fonctionner - quelqu'un peut-il offrir tout conseil s'il vous plaît?

Merci

Helen

Source

2009-05-15 Helen

Aha Je suppose correctement http://stackoverflow.com/questions/867587/css-footer-trying- to-split-into-2-columns/867599 # 867599 –

Cochez ma réponse dans: http://stackoverflow.com/questions/1844207/how-to-make-a-div-to-wrap-two-float- . divs-intérieur/1844291 n ° 1844291 qui devrait fonctionner – lepe

avez-vous essayé d'installer une largeur de gauche et à droite, par exemple 50% chacun

Source

2009-05-15 08:39:07 bumperbox

Vous utilisez footer p .right et non footer p.right (notez le caractère d'espace). Cela signifie que les classes .right et .left ne s'appliquent pas aux paragraphes, mais aux éléments descendants à l'intérieur du paragraphe. Ou cela peut aussi signifier une faute de frappe, ce qui fait échouer votre CSS :)

Veuillez copier votre code HTML ici, afin que nous puissions vous aider au mieux.

Edit: Je vois que vous avez maintenant affiché votre code HTML. Mon hypothèse s'avère correcte. Débarrassez-vous des espaces entre p et .left/.right. En outre, si vous faites flotter les paragraphes de toute façon, vous pouvez omettre les propriétés text-align.

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

Source

2009-05-15 08:39:58

merci pour votre message, j'ai copié le code comme suggéré donc maintenant #footer { \t clear: both; \t background-color: # 330066; \t rembourrage: .5em; \t taille de police: 0,8em; \t couleur: # 000; } #footer p.gauche { \t float: left; } #footer p.right { \t flotteur: droit; } (le html est toujours le même que celui affiché) cela affiche le texte sous le pied de page?!? – Helen

J'ai édité mon post en réponse à votre commentaire. –

ok, vous avez raison, cela fonctionne, mais pas dans IE8. Lorsqu'il est exécuté en mode de compatibilité, le pied de page affiche OK avec le texte à l'intérieur des bordures, mais en mode IE8, le texte s'affiche sous le div du pied de page. – Helen

Comme paragraphes sont des éléments de niveau bloc, si vous souhaitez être affichées côte à côte, vous devez retirer les flotteurs et les mettre à être en ligne:

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

également Je suppose que cela devrait être soit #footer ou .footer au préalable?

Source

2009-05-15 08:44:15 Sliff

Le 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; }

Le width: 100%; et le overflow: hidden; va résoudre votre problème, car il efface les flotteurs après avoir fait.

Avec le code ci-dessus, vous pourrez juste avoir:

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

Source

2009-05-15 08:51:22 janhartmann

Pas besoin d'enlever clair: à la fois sur le #footer comme suggéré précédemment. Comme l'a dit Mathias Bynens, vous devez écrire "p.left" au lieu de "p.gauche » Vous aurez besoin d'un clair à la fois après les deux paragraphes et se retrouver 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>

Source

2009-05-15 09:06:52 Daniel

css footer - essayant de diviser en 2 colonnes

Répondre

Questions connexes