bloc div flottante droite qui ne prends pas toute la hauteur

bloc div flottante droite qui ne prends pas toute la hauteur - HTML/CSS - Programmation

Marsh Posté le 16-05-2007 à 22:48:30    

Hello j'ai un problème avec mon code voilà la structure du milieu du forum appeler contenu
 

Code :
  1. <div id="center">
  2.     <!-- bloc contenu de gauche-->
  4.   <div id="left">
  6.       <div id="haut_gauche"></div>
  7.  
  8.       <!-- Contenu principal partie gauche-->
  9.      <div id="contenu_gauche"> Contenu gauche  </div>
  11.       <div id="bas_gauche"></div>
  13.     <!--fin bloc contenu de gauche-->
  14.     </div>
  17.     <!-- bloc contenu de droite-->
  18. <div id="right">
  20.       <div id="haut_droite"></div>
  22.       <!-- Contenu principal partie droite-->
  23.       <div id="contenu_droite"> Contenu droite
  25.       <!-- fin contenu droite-->
  26.      </div>
  28.    
  30.       <div id="bas_droite"></div>
  31.  
  32.       <!-- fin bloc right-->
  33.    </div>
  35.   <!-- fin contenu au centre -->
  36.   </div>


 
 
voilà le CSS

Code :
  1. /********************************************** BLOCS POUR LE CONTENU *****************************************************************/
  2. #center {
  3. /* Pour éviter la superposition  
  4. du pied de page et du contenu : */
  5. padding-bottom: 84px;
  6. overflow: hidden;
  7. width: 100%;
  8. height:100%;
  10. }
  12. #left{
  13. float:left;
  14. width: 600px;
  15. border: 0px;
  16. padding: 0px;
  17. margin: 0px;
  18. }
  20. #right{
  21. float:right;
  22. width: 200px;
  23. border: 0px;
  24. padding: 0px;
  25. margin: 0px;
  27. }
  28. /********************************************** DESIGN POUR LE CONTENU *****************************************************************/
  29. #haut_gauche{
  30. background-image: url(images_bannieres/bg_g_h.png);
  31. background-repeat: no-repeat;
  32. width: 600px;
  33. height: 50px;
  35. }
  37. #contenu_gauche{
  38. background-image: url(images_bannieres/wallpapert.png);
  39. background-repeat: repeat-y;
  40. width: 600px;
  41. padding-left: 40px;
  42. height:100%;
  43. overflow:auto;
  45. }
  47. #bas_gauche{
  48. background-image: url(images_bannieres/bg_g_b.png);
  49. background-repeat: no-repeat;
  50. width: 600px;
  51. height: 50px;
  52. }
  56. #haut_droite{
  57. background-image: url(images_bannieres/bg_p_h.png);
  58. background-repeat: no-repeat;
  59. width: 200px;
  60. height: 50px;
  62. }
  64. #contenu_droite{
  65. background-image: url(images_bannieres/wallpapert_menudroite.png);
  66. background-repeat: repeat-y;
  67. width: 200px;
  68. padding-left: 20px;
  69. height:100%;
  70. overflow:auto;
  72. }
  74. #bas_droite{
  75. background-image: url(images_bannieres/bg_p_b.png);
  76. background-repeat: no-repeat;
  77. width: 200px;
  78. height: 50px;
  80. }


 
 
le problème est que si le contenu de gauche est plus grand que celui de droite, celui de droite donc ne va pas prendre la même hauteur que son confrère, pourtant j'ai mis des height:100%; pour les deux.
Apparemment les deux flottantes prennent leur grandeur par rapport au contenu qui est dedans
moi j'aimerai que si un des deux est plus grand que l'autre ils se configurent pour prendre la meme hauteur vous comprennez ?
en tableaux ca serait simplement un height=100% mais là il prend pas :/


Message édité par zupstyle le 16-05-2007 à 22:49:47

---------------
Mon topic Tiësto
Reply

Marsh Posté le 16-05-2007 à 22:48:30   

Reply

Marsh Posté le 17-05-2007 à 00:03:33    

impose une hauteur fixe en px


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 17-05-2007 à 00:13:54    

pas un autre moyen car si je fais ca je devrais faire un overflow:auto; et la scrollbar j'aimerai éviter
il doit avoir un moyen mais là je sèche ?


---------------
Mon topic Tiësto
Reply

Marsh Posté le 17-05-2007 à 00:56:56    

deux choses :
1- si le contenu de ta boite de gauche évolue et augmente, la hauteur augmentera également meme en mettant un height 100%.  
2- si le contenu n'augmentera pas, tu peux figer la hauteur. 100% means que la boite fera la hauteur de la page ou de son parent. Tu peux dans ce cas figer la heuteur des deux blocs (gauche et droite) et harmoniser le tout.
 d'apres ce que tu dis, le contenu évoluera, et donc mettre 100% te mettra l'ascenseur de la page.


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 17-05-2007 à 01:11:46    

donc je dois faire quoi en gros, car mon but est d'éviter absolument l'ascenceur dans ma boite center, ou meme contenu  
je veux juste la scroll bar de la page mais c'est tout, et que les deux bloc de contenu respectivement gauche et droite soient harmoniser et donc de même hauteur avec ou sans contenu
possibilités ?


---------------
Mon topic Tiësto
Reply

Marsh Posté le 17-05-2007 à 10:28:54    

alors pourquoi ne pas figer leurs hauteurs à genre 700px, et point barre ! c'est en gros la hauteur d'une page (en 1024x768 résolution la plus courante) et comme ça pas de scrollbar dans ton div


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 17-05-2007 à 11:19:10    

comment ca figer a 700px de hauteur ? si le contenu fait plus de 700 px ca va dépasser nan


---------------
Mon topic Tiësto
Reply

Marsh Posté le 17-05-2007 à 22:17:55    

700 sté un exemple. si son contenu ne bougera pas, qu'il le fixe aux limites du contenu, stoo :o


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 18-05-2007 à 14:48:53    

toutes  les pages non pas la meme hauteur, je comprends pas bien ce que tu veux me conseiller, dsl :/


---------------
Mon topic Tiësto
Reply

Sujets relatifs:

Leave a Replay

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