Pb affichage 2 DIV un à coté de l'autre. Les CSS c'est chiant :D

Pb affichage 2 DIV un à coté de l'autre. Les CSS c'est chiant :D - HTML/CSS - Programmation

Marsh Posté le 09-01-2006 à 12:30:12    

Bonjour à tous, je me prend la tête avec ma mise en page.
 
Je voudrais 2 DIV un a coté de l'autre, mais que le plus hat des 2 définisse la hauteur du DIV dans lequel ils sont.
 
Je m'explique.
 
J'ai un DIV conteneur, dans lequel je mets 2 DIV que je veux cote à cote.
 
J'ai réussi à les mettre comme je veux avec un float: right;
 
Donc si le contenu du DIV gauche est assez grand, ça va, ça donne ça :
 
http://www.mezimages.com/image/yell/byste/float-page1.png
 
Mais si le contenu du DIV gauche est très petit, le DIV droite (étant en float) n'agrandit pas le DIV conteneur :
 
http://www.mezimages.com/image/yell/byste/float-page2.png
 
Comment je pourrais faire pour mettre ces 2 DIV dans un DIV conteneur et que le plus grand des 2 agrandisse ce dernier ?
 
Merci

Reply

Marsh Posté le 09-01-2006 à 12:30:12   

Reply

Marsh Posté le 09-01-2006 à 13:48:42    

Salut  :hello:  
 
Si comme je le suppose ton code est :

Code :
  1. <div id="conteneur">
  2.   <div id="flottant_droite">Bloc de droite</div>
  3.   <div id="contenu">Bloc de gauche</div>
  4. </div>


Modifies-le comme çà :

Code :
  1. <div id="conteneur">
  2.   <div id="flottant_droite">Bloc de droite</div>
  3.   <div id="contenu">Bloc de gauche</div>
  4.   <div class="spacer"></div>
  5. </div>


avec dans ton CSS :

Code :
  1. .spacer {
  2.   clear: both;
  3.   visibility: hidden;
  4. }


 
 [:fafane84]


---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 09-01-2006 à 14:13:43    

C'est vrai que j'aurais dû mettre une portion du code, mais tu as bien deviné, c'est quasiment ça, sauf que du coup je n'ai pas été obligé de mettre un spacer, car j'ai un footer
 

<div id="conteneur">
    <div id="flottant_droite">Bloc de droite</div>
    <div id="contenu">Bloc de gauche</div>
    <div id="footer">Mon pied de page</div>
</div>


 
J'ai donc mis un clear:both; sur mon footer et ça marche nickel :)
 
Merci beaucoup.
 
Du coup j'ai une autre question, moins importante mais bon, si j'avais une solution ça améliorerais le design.
 
La "séparation" entre le bloc droit et le bloc gauche est un border-right sur le bloc de gauche ... donc si le bloc de gauche est plus grand que celui de droite, c'est parfait, mais si le bloc de droite est plus grand que celui de gauche :
 
http://www.mezimages.com/image/yell/byste/border.png
 
En tout cas merci fafane84, car le plus gros est fait maintenant :)


Message édité par Dj YeLL le 09-01-2006 à 14:13:52
Reply

Marsh Posté le 09-01-2006 à 14:22:05    

BOn en "trichant" un peu j'ai réussi.
 
En fait j'ai viré le border-right. J'ai pris un pointillé que j'ai transformé en image GIF, et sur mon content j'ai mis un background avec l'image du pointillé, en repeat-y, et en position 570px (pour qu'il tombe au meme endroit que l'autre).
 
Du coup quelque soit la hauteur de l'un ou de l'autre des DIV, j'ai ma séparation d'en au jusqu'en bas :)

Reply

Sujets relatifs:

Leave a Replay

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