positionnement float n'agrandit pas la hauteur

positionnement float n'agrandit pas la hauteur - HTML/CSS - Programmation

Marsh Posté le 23-01-2013 à 13:12:14    

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. }
  11. #corps {
  12.   width:800px;
  13.   opacity:1;
  14. }
  15. #menu {
  16.   width:190px; padding:20px 10px 2px 0px;
  17. }
  19. #menu, #corps {
  20.   float:left;
  21. }


 
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 :??:
Reply

Marsh Posté le 23-01-2013 à 13:12:14   

Reply

Marsh Posté le 23-01-2013 à 13:19:33    

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 :??:
Reply

Marsh Posté le 23-01-2013 à 13:46:20    

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?!
Reply

Marsh Posté le 23-01-2013 à 14:17:03    

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 :??:
Reply

Sujets relatifs:

Leave a Replay

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