[HTML / CSS] Un cadre contenant deux blocs

Un cadre contenant deux blocs [HTML / CSS] - HTML/CSS - Programmation

Marsh Posté le 22-08-2005 à 14:26:13    

Salut,
 
Dans ma page, je dois afficher un cadre bleu, et dans ce cadre, deux éléments de texte : l'un alligné à gauche, et l'autre à droite.
 
J'ai donc fait ça :
 

Code :
  1. <div class="critereRechercheCentre">
  2.    <div class="innerGauche">Blabla gauche</div>
  3.    <div class="innerDroite">Blabla droite</div>
  4.   </div>


 
Et le style :
 

Code :
  1. .critereRechercheCentre
  2. {
  3. border: 1px solid #9EB7DF;
  4. background-color: #EAF1FB;
  5. font-weight: bold;
  6. padding-left: 7px;
  7. padding-right: 7px;
  8. padding-top: 4px;
  9. padding-bottom: 9px;
  10. width: auto;
  11. display: block;
  12. margin-top: 22px;
  13. clear: both;
  14. }
  16. .critereRechercheCentre.innerGauche
  17. {
  18. text-align: left;
  19. width: 48%;
  20. clear: both;
  21. float: left;
  22. display: block;
  24. }
  26. .critereRechercheCentre.innerDroite
  27. {
  28. text-align: right;
  29. width: 48%;
  30. clear: both;
  31. float: right;
  32. display: block;
  33. }


 
Ca "marche", sauf que mes deux bloques de texte dépassent du cadre, qui ne grandit pas avec le reste... Comment corriger ça ?
 
J'ai remplacé par des <span> et des <p>, mais rien ne change, ça déconne toujours :/
 
Merci de me dire comment faire... :/
 
Tests pour le moment avec IE 6 SP2 mais ça doit marcher aussi sous FF

Reply

Marsh Posté le 22-08-2005 à 14:26:13   

Reply

Marsh Posté le 22-08-2005 à 15:58:08    

Salut à toi,  
 
Il y a un peu de répétition dans ton code :

  • display: block ; est inutile car les "div" sont déjà des éléments de type en bloc.
  • seul un float est nécéssaire dans ce cas là. (deux sont nécéssaires par exemple lors de 3 colonnes et plus, pas 2).  
  • les clear: both ; sont inutiles (peut-être les utiliser, si jamais t'as besoin, en cas de rajout en dessous de ces deux cadres). De plus ce n'est pas comme ça que la propriété s'utilise.
  • sinon tu n'es pas obligé de mettre ".critereRechercheCentre." devant tes ".innerDroite" et "innerGauche". d'ailleurs tu as oublié le ">".  


Voilà qui est un peu plus propre. Je suis pas sûr à 100% mais j'ai test& sous IE et FF.

Code :
  1. .critereRechercheCentre
  2. {
  3. border: 1px solid #9EB7DF;
  4. background-color: #EAF1FB;
  5. font-weight: bold;
  6. padding: 4px 7px 9px 7px ;
  7. margin-top: 22px;
  8. }
  9. .innerGauche
  10. {
  11. text-align: left;
  12. float: left;
  13. width: 48% ;
  14. }
  15. .innerDroite
  16. {
  17. text-align: right;
  18. }


 
ceci est une bonne adresse pour comprendre les "float" : http://www.openweb.eu.org/articles/initiation_float/
a+ !


Message édité par Huitzilopoc le 22-08-2005 à 16:01:00
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed