Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1477 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  positionnement float n'agrandit pas la hauteur

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

positionnement float n'agrandit pas la hauteur

n°2172332
snike
Posté le 23-01-2013 à 13:12:14  profilanswer
 

Bonjour,
 
  J'ai 3 balises <div>, un div "page" contenant un div "menu" et un div "corps".
  Mon soucis est que lorsque le contenu de la balise corps est plus haute que 500px (min-height:500px;), le div "page", ne s'agrandit pas et le corps passe au dessus du bas de page placé en dessous de mon div "Page".
 
Mon code HTML ressemble à :

Code :
  1. <div id="page">  <!-- DEBUT PAGE -->
  2.   <div id="menu">
  3.     Menu1
  4.     Menu2
  5.     Menu3
  6.     Menu4
  7.     Menu5
  8.   </div>
  9.   <div id="corps">
  10.     Mon texte avec des images qui varie en fonction de ma page Web.
  11.   </div>
  12. </div> <!-- FIN PAGE -->


 
le style est :  

Code :
  1. #page {
  2.   background:#FFF;
  3.   padding:10px;
  4.   border-radius:20px;
  5.   width:1000px;
  6.   margin-left:auto;
  7.   margin-right:auto;
  8.   min-height:500px;
  9. }
  10. #corps {
  11.   width:800px;
  12.   opacity:1;
  13. }
  14. #menu {
  15.   width:190px; padding:20px 10px 2px 0px;
  16. }
  17. #menu, #corps {
  18.   float:left;
  19. }


 
Float: left permet d'avoir le corps à droite du menu.
 
Merci par avance.


---------------
Le problème avec les idées derrière la tête c'est qu'on ne peut pas les voir :??:
mood
Publicité
Posté le 23-01-2013 à 13:12:14  profilanswer
 

n°2172334
snike
Posté le 23-01-2013 à 13:19:33  profilanswer
 

Il y a bien la solution de remplacer le div "page" par une balise "table", mais j'essaie d'arrêter les <table>, plus propre en css, non ?


---------------
Le problème avec les idées derrière la tête c'est qu'on ne peut pas les voir :??:
n°2172349
Riokmij
Blink and you're dead
Posté le 23-01-2013 à 13:46:20  profilanswer
 

C'est un comportement normal, les floats n'agrandissent jamais la hauteur de leur parent.

 

Pour contourner ça, tu peux simplement ajouter un div vide avec "clear: both" à la fin de ton div#page. Le "clear" fera en sorte qu'il s'affiche en-dessous de tout ce qui est flottant, et comme il n'est pas flottant lui-même, ça va agrandir le parent.

 

Autre façon de faire, sans modifier le html (c'est la même idée, sauf qu'au lieu d'ajouter explicitement un bloc, on utilise un pseudo-bloc :after) :

Code :
  1. #corps:after {
  2.   display: block;
  3.   content: "";
  4.   clear: both;
  5. }


Message édité par Riokmij le 23-01-2013 à 14:34:21

---------------
Are you two fucking? Are you serious? Right in front of my salad?!
n°2172359
snike
Posté le 23-01-2013 à 14:17:03  profilanswer
 

Parfait, j'ai mis un #page:after est c'est ok.
 
Encore merci.


---------------
Le problème avec les idées derrière la tête c'est qu'on ne peut pas les voir :??:

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  positionnement float n'agrandit pas la hauteur

 

Sujets relatifs
Hauteur de div (100%)DIV: Diviser une page avec occupation maximal en hauteur
[RESOLU] sscanf pour récupérer des float[C/SDL] Rotation Image/Positionnement
[Résolu] Problème positionnement d'une note avec "vertical-align: top"Positionnement de "blocks"
html/css : des "lignes à hauteur dynamiques" ?[HTML/CSS] Positionnement centré
Problème de positionnementpb de positionnement de div avec IE7
Plus de sujets relatifs à : positionnement float n'agrandit pas la hauteur


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR