[RESOLU] [CSS] aligner deux DIV sans position absolu ???

aligner deux DIV sans position absolu ??? [RESOLU] [CSS] - HTML/CSS - Programmation

Marsh Posté le 09-03-2005 à 18:46:22    

probleme resolu : methode "<hr> + clear : both"
(cf. plus bas)

 
salut
 
je cherche un tuto qui expliquerais une technique pour gérer un div conteneur qui s'aggrandit suivant ses deux div en ligne qu'il contient, sachant qu'aucun des deux n'a de hauteur fixe (donc impossible de placer un des element en absolu  :cry: )
 
sur le net je trouve que des tuto avec le div de droit extensible en hauteur et le gauche fixe en hauteur, hors dans mon cas les deux div sont extensibles d'où la complexité de la gestion  :sweat:
 
 
MAJ : en fait, la vrai question est : comment aligner deux DIV sans utiliser de position absolu ???  
 
bref un dessin vaut toute les paroles, je veux faire ça :
 
http://nemohp.dyndns.org/tmp/design.PNG
 
exemple 1 : c'est le div gauche qui fait étirer le conteneur en hauteur
exemple 2 : c'est le div droite qui etire le conteneur hauteur
 
ps : le div gauche a une taile fixe (width: 150px), le div droite utilise le reste de l'espace (donc width inconnu)
 
voila merci de me donner des pistes si vous avez  :hello:
 
 
 
MAJ: avec les "FLOAT : left" ça me donne ça :
http://nemohp.dyndns.org/tmp/design2.PNG
 
donc toujours pas bon ...


Message édité par nemohp le 09-03-2005 à 21:29:38
Reply

Marsh Posté le 09-03-2005 à 18:46:22   

Reply

Marsh Posté le 09-03-2005 à 18:47:29    

Haaa, si seulement les navigateurs implémentaient display: inline-block, on serait sauvés sur un tas de trucs :(

Reply

Marsh Posté le 09-03-2005 à 18:48:32    

c'est sur ..

Reply

Marsh Posté le 09-03-2005 à 18:50:15    

donc voila la basique déclaration html
 

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

Reply

Marsh Posté le 09-03-2005 à 18:51:23    

Je pense avec un <div> de type spacer :/ Tu rajoutes un troisième <div>, qui aura la propriété clear: both. Et genre un height: 1px...

Reply

Marsh Posté le 09-03-2005 à 18:53:09    

je ne vois pas trop ce que tu veux dire
 
comment je déclare le 3eme div ?

Reply

Marsh Posté le 09-03-2005 à 19:02:10    

<div class="spacer"></div>


Et dans le CSS :

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


Message édité par FlorentG le 09-03-2005 à 19:02:17
Reply

Marsh Posté le 09-03-2005 à 19:04:37    

je voulais dire tu le déclare dans quel ordre par rapport au autres divx
 
comme ça  :??:  
 

Code :
  1. <div id="conteneur">
  2.   <div id="gauche"> ... </div>
  3.   <div id="spacer"></div>
  4.   <div id="droite"> ... </div>
  5. </div>


 
 

Reply

Marsh Posté le 09-03-2005 à 19:06:20    

Le spacer à la fin je dirais, après les deux autres

Reply

Marsh Posté le 09-03-2005 à 19:15:24    

je ne vois pas l'interet de ton spacer, désolé

Reply

Marsh Posté le 09-03-2005 à 19:15:24   

Reply

Marsh Posté le 09-03-2005 à 19:16:02    

Si tes deux divs sont bien en float, ça va aller après les deux floats, et faire agrandir le div jaune

Reply

Marsh Posté le 09-03-2005 à 19:17:27    

oui float => absolu donc en dehors du conteneur, non ?

Reply

Marsh Posté le 09-03-2005 à 19:18:30    

Presque ouais. En dehors d'une certaine manière :)

Reply

Marsh Posté le 09-03-2005 à 19:25:23    

donc ça résoud pas mon probleme, merci quand meme
 
ps : c'est pas conseillé de déclarer des éléments vides ;-)

Reply

Marsh Posté le 09-03-2005 à 19:26:57    

Oui, c'est nul à chier :D Le mieux serait d'utiliser un <hr /> Ce serait un peu mieux


Message édité par FlorentG le 09-03-2005 à 19:27:12
Reply

Marsh Posté le 09-03-2005 à 19:45:30    

je veins de réflerchir (si si !!!)
 
en faite mon probleme serait plutot comment aligner deux div sans avoir aucun ddes deux déclarés en absolu ???

Reply

Marsh Posté le 09-03-2005 à 21:27:39    

en faite le HR ca marche bien comme technique :ange:  
 

Code :
  1. <div id="conteneur">
  2.   <div id="gauche"> ... </div>
  3.   <div id="droite"> ... </div>
  4.   <hr>
  5. </div>


 
le css :

Code :
  1. #gauche {
  2. background-color:green;
  3. float:left;
  4. width:150px;
  5. }
  6. #droite {
  7. margin-left:150px;
  8. background-color:blue;
  9. }
  10. hr {
  11. clear:both;
  12. }


 
donc problème résolu  [:toine]  

Reply

Marsh Posté le 09-03-2005 à 21:57:34    

Voilà, et sous Lynx ça aura une bonne gueule avec une zolie séparation presque sémantique :)

Reply

Marsh Posté le 28-08-2006 à 22:46:58    

Yeah!!
 
Merci beaucoup les gens, ça faisait des jours que j'avais ce problèmes; ça marche nickel chrome.
Petit + pour que mon post serve: on peut mettre le hr en visibility: hidden si on en veut pas :]
 
Encore merci :)

Reply

Sujets relatifs:

Leave a Replay

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