Se connecter / S'enregistrer

Résolu [CSS] gerer l'aggrandissement d'un block quand on a un float:left

Solutions (5)
Tags :
  • CSS
  • Programmation
|
Bonjour.

Je suis pas certain que le titre soit super explicite, donc je vous expose mon soucis.

J'ai un block container qui contient deux autre block dont l'un des deux est en float:left pour avoir 2 colones.
Tout irait dans le meilleurs des mondes si le block container s'agrandissait en fonction du contenu des deux block qu'il contient.

Pour le moment, il ne s'agrandit qu'en fonction du contenu du block de droite puisqu'il n'est pas flottant. Existe-t'il une solution ou je vais devoir faire en sorte de repenser mon design de facon à ce que cela ne se remarque pas ^^


Je n'allais pas copier l'ensemble du code du site, donc pour illustré je vous ai fait un petit exemple.

  1. <body>
  2. <div id="container">
  3. <div id="left">
  4. test gauche <br />
  5. test <br />
  6. tagadat
  7. </div>
  8. <div id="right">
  9. test droit <br />
  10. </div>
  11. </div>
  12.  
  13. </body>


  1. #container {
  2. width:600px;
  3. margin:0 auto;
  4. background-color:#CF0;
  5. }
  6. #left {
  7. width:200px;
  8. float:left;
  9. }
  10. #right {
  11. width:200px;
  12. margin-left:100px;
  13. }


Puisqu'il n'y a qu'une ligne dans le block right, le block container ne fait egalement qu'une ligne. Et donc deux ligne du block left dépassent.


Merci de votre aide.
Contenus similaires
  • Autres pages sur : css gerer aggrandissement block float left
Meilleure solution
partage
|
Tu mettais au conteneur la propriété overflow: auto; c'étais pareil :p 
  • Commenter cette solution |
Score
0
òh
òi
|
Tu m'apprend quelque chose, merci OmaR :p 
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
allstar27 a dit :
Tu mettais au conteneur la propriété overflow: auto; c'étais pareil :p 


non... Ca aurait pas fonctionné sous IE6 :) 
  • Commenter cette réponse |
Score
0
òh
òi
|
Je suis d'accord, j'ai été un peu vite lors de mon exemple. Cela dit, ca ne change rien au problème.

Je vais qu'en même changer ca dans mon post d'origine.


Je viens de trouver la solution, il faut utiliser un block supplémentaire qu'on l'ont met en dernier dans le div container, et on lui donne la propriété CSS Clear:both . Cela oblige Container a s'agrandir jusqu'à ce div.

Ca m'a prit 3 heures mais je suis content d'avoir farfouiller l'ensemble des propriétés CSS.
  • Commenter cette réponse |
Score
0
òh
òi
|
le conteneur est à 600px ton block de gauche fais 200px l'autre aussi et ta marge 300px ca fais 700...
  • Commenter cette réponse |

Ce n'est pas ce que vous cherchiez ?

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS