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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1279507
Dj YeLL
$question = $to_be || !$to_be;
Posté le 09-01-2006 à 12:30:12  profilanswer
 

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

mood
Publicité
Posté le 09-01-2006 à 12:30:12  profilanswer
 

n°1279545
fafane84
Posté le 09-01-2006 à 13:48:42  profilanswer
 

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
n°1279571
Dj YeLL
$question = $to_be || !$to_be;
Posté le 09-01-2006 à 14:13:43  profilanswer
 

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
n°1279575
Dj YeLL
$question = $to_be || !$to_be;
Posté le 09-01-2006 à 14:22:05  profilanswer
 

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 :)


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

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

 

Sujets relatifs
Projet étudiant: Programme Affichage News et Popup[CSS] un degradé de couleur !
Datagrid C# affichage dynamique de champs de texteC# : affichage dynamique de champ de texte
[CSS] impossible de changer la couleur du fond sous FF (IE ok) RESOLUProbleme affichage liens CSS...
CSS - problemes de listes imbriquéesDIV mi-transparrent sous IE
[JAVA] probleme d'affichage caracteres spéciaux 
Plus de sujets relatifs à : Pb affichage 2 DIV un à coté de l'autre. Les CSS c'est chiant :D


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