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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1007148
nemohp
Adepte du provisoire permanent
Posté le 09-03-2005 à 18:46:22  profilanswer
 

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
mood
Publicité
Posté le 09-03-2005 à 18:46:22  profilanswer
 

n°1007149
FlorentG
Posté le 09-03-2005 à 18:47:29  profilanswer
 

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

n°1007150
nemohp
Adepte du provisoire permanent
Posté le 09-03-2005 à 18:48:32  profilanswer
 

c'est sur ..

n°1007152
nemohp
Adepte du provisoire permanent
Posté le 09-03-2005 à 18:50:15  profilanswer
 

donc voila la basique déclaration html
 

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

n°1007155
FlorentG
Posté le 09-03-2005 à 18:51:23  profilanswer
 

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...

n°1007159
nemohp
Adepte du provisoire permanent
Posté le 09-03-2005 à 18:53:09  profilanswer
 

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

n°1007168
FlorentG
Posté le 09-03-2005 à 19:02:10  profilanswer
 

<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
n°1007171
nemohp
Adepte du provisoire permanent
Posté le 09-03-2005 à 19:04:37  profilanswer
 

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>


 
 

n°1007173
FlorentG
Posté le 09-03-2005 à 19:06:20  profilanswer
 

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

n°1007181
nemohp
Adepte du provisoire permanent
Posté le 09-03-2005 à 19:15:24  profilanswer
 

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

mood
Publicité
Posté le 09-03-2005 à 19:15:24  profilanswer
 

n°1007183
FlorentG
Posté le 09-03-2005 à 19:16:02  profilanswer
 

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

n°1007184
nemohp
Adepte du provisoire permanent
Posté le 09-03-2005 à 19:17:27  profilanswer
 

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

n°1007185
FlorentG
Posté le 09-03-2005 à 19:18:30  profilanswer
 

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

n°1007193
nemohp
Adepte du provisoire permanent
Posté le 09-03-2005 à 19:25:23  profilanswer
 

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

n°1007197
FlorentG
Posté le 09-03-2005 à 19:26:57  profilanswer
 

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
n°1007228
nemohp
Adepte du provisoire permanent
Posté le 09-03-2005 à 19:45:30  profilanswer
 

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 ???

n°1007371
nemohp
Adepte du provisoire permanent
Posté le 09-03-2005 à 21:27:39  profilanswer
 

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]  

n°1007404
FlorentG
Posté le 09-03-2005 à 21:57:34  profilanswer
 

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

n°1432780
Ruliane
Posté le 28-08-2006 à 22:46:58  profilanswer
 

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


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

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

 

Sujets relatifs
[CSS] Newsletter - soucis de borders[CSS] Alignement vertical d'un menu d'images?
CSS et formulaireCSS et mise en page
Lecture d'un fichier et copie dans un buffer, ultra lent ! [Resolu][resolu] [JSP][Tomcat 5] Problème lors du passage de paramètres ?
[Résolu][HTML] Largeur de contenu d'une iframe[CSS] compatibilité firefox - opera
[java][Resolu] Probleme lecture de fichier[RESOLU]PHP-LDAP fonction ldap-rename
Plus de sujets relatifs à : [RESOLU] [CSS] aligner deux DIV sans position absolu ???


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