[xhtml/css] Mon bloc ne s'étire pas avec son contenu (débutant)

Mon bloc ne s'étire pas avec son contenu (débutant) [xhtml/css] - HTML/CSS - Programmation

Marsh Posté le 12-10-2005 à 18:48:36    

Bonjour,
Alors voilà, je débute totalement en programmation web, j'ai déjà réalisé une grosse partie de mon site sans trop de problème grâce aux différents tutos et à ce forum. Je bloque aujourd'hui sur une des pages.
Alors puisqu'une image vaut mieux qu'un long discours voilà mon problème:
Ce que je veux:
http://img406.imageshack.us/img406/4302/veux2ye.th.jpg
Ce que j'ai:
http://img406.imageshack.us/img406/9083/a1dd.th.jpg
 
Voici mon code:
Html:

Code :
  1. <div id="centre">
  5.   <h2>Composition du bureau</h2>
  7.   <div class="float">
  8.   <img src="images/photo.jpg" alt="Membre" /><br />
  9.   <p>Lucky Luke<br />
  10.   Président<br />
  11.   MSTCF 2</p>
  12.   </div>
  14.   <div class="float">
  15.   <img src="images/photo.jpg" alt="Membre" /><br />
  16.   <p>Obiwan Kenobi<br />
  17.   Vice-Président<br />
  18.   DESS CAAE</p>
  19.   </div>
  21.   <div class="float">
  22.   <img src="images/photo.jpg" alt="Membre" /><br />
  23.   <p>Mario Bros<br />
  24.   Secrétaire<br />
  25.   MSG 2</p>
  26.   </div>
  28.   <div class="float">
  29.   <img src="images/photo.jpg" alt="Membre" /><br />
  30.   <p>Mario Bros<br />
  31.   Secrétaire<br />
  32.   MSG 2</p>
  33.   </div>
  35. </div>


Le css:

Code :
  1. #centre {
  2. margin-left: 150px;
  3. margin-right: 150px;
  4. border: solid black 1px;
  5. }
  6. .float {
  7. float: left;
  8. text-align: center;
  9. margin-left: 10px;
  10. margin-right: 10px;
  11. }


Et donc j'aimerais que la bordure ne s'arrête pas à <h2> comme c'est le cas avec mon code. Je pourrais passer par un tableau mais je préfère connaître la solution avec des div pour l'instant.
Merci d'avance por votre aide ;)


Message édité par blazer le 12-10-2005 à 18:56:06
Reply

Marsh Posté le 12-10-2005 à 18:48:36   

Reply

Marsh Posté le 12-10-2005 à 19:59:32    

Hello,
 
C'est le comportement normal des éléments flottants : ils sortent du flux et "dépassent" de leur conteneur.
Il faut utiliser un élément avec la propriété clear pour arranger cela.
 
Openweb explique bien tout ça dans son article sur le positionnement flottant.
 
Bonne chance :)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 12-10-2005 à 20:15:30    

Merci beaucoup de m'avoir aidé :) Je suis parti sur le tutorial de openweb et effectivement j'y ai trouvé la solution, ajouter un espace insécable dans un div avec la propriété clear me donne le résultat voulu ;).
Encore merci, bonne soirée :).

Reply

Sujets relatifs:

Leave a Replay

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