[RESOLU] [CSS] aligner deux DIV sans position absolu ???
nemohp
Adepte du provisoire permanent
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 )
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
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 :
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
MAJ: avec les "FLOAT : left" ça me donne ça :
donc toujours pas bon ...
Message édité par nemohp le 09-03-2005 à 21:29:38
Publicité
Posté le 09-03-2005 à 18:46:22
FlorentG
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
nemohp
Adepte du provisoire permanent
Posté le 09-03-2005 à 18:48:32
c'est sur ..
nemohp
Adepte du provisoire permanent
Posté le 09-03-2005 à 18:50:15
donc voila la basique déclaration html
Code :
<div id="conteneur">
<div id="gauche"> ... </div>
<div id="droite"> ... </div>
</div>
FlorentG
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...
nemohp
Adepte du provisoire permanent
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 ?
FlorentG
Posté le 09-03-2005 à 19:02:10
<div class="spacer"></div>
Et dans le CSS :
Code :
.spacer {
clear: both;
}
Message édité par FlorentG le 09-03-2005 à 19:02:17
nemohp
Adepte du provisoire permanent
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 :
<div id="conteneur">
<div id="gauche"> ... </div>
<div id="spacer"></div>
<div id="droite"> ... </div>
</div>
FlorentG
Posté le 09-03-2005 à 19:06:20
Le spacer à la fin je dirais, après les deux autres
nemohp
Adepte du provisoire permanent
Posté le 09-03-2005 à 19:15:24
je ne vois pas l'interet de ton spacer, désolé
Publicité
Posté le 09-03-2005 à 19:15:24
FlorentG
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
nemohp
Adepte du provisoire permanent
Posté le 09-03-2005 à 19:17:27
oui float => absolu donc en dehors du conteneur, non ?
FlorentG
Posté le 09-03-2005 à 19:18:30
Presque ouais. En dehors d'une certaine manière
nemohp
Adepte du provisoire permanent
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 ;-)
FlorentG
Posté le 09-03-2005 à 19:26:57
Oui, c'est nul à chier Le mieux serait d'utiliser un <hr /> Ce serait un peu mieux
Message édité par FlorentG le 09-03-2005 à 19:27:12
nemohp
Adepte du provisoire permanent
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 ???
nemohp
Adepte du provisoire permanent
Posté le 09-03-2005 à 21:27:39
en faite le HR ca marche bien comme technique
Code :
<div id="conteneur">
<div id="gauche"> ... </div>
<div id="droite"> ... </div>
<hr>
</div>
le css :
Code :
#gauche {
background-color:green;
float:left;
width:150px;
}
#droite {
margin-left:150px;
background-color:blue;
}
hr {
clear:both;
}
donc problème résolu
FlorentG
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
Ruliane
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 :]