[Résolu] 2 DIVs "fluides" dans un conteneur "fluide".

2 DIVs "fluides" dans un conteneur "fluide". [Résolu] - HTML/CSS - Programmation

Marsh Posté le 20-05-2005 à 15:49:01    

Bonjour à toutes et tous.
 
J'ai un conteneur dont voici la CSS:
 
div#contenu
 {
 position: relative;
 margin: 46px 156px 0px 148px;
 }
Il prend 100% de la largeur avec de grande marge gauche et droite pour le menu et une illustration.
 
J'aimerais créer 2 colonnes "fluides" (48%-48%)à l'intérieur de ce conteneur
Voici leurs CSSs :  
div#colonne_a
 {
 width: 48%;
 }
div#colonne_b
 {
 float: right;
 width: 48%;
 }
 
 
Le HTML, vraiment tout ce qu'il y a de plus simple :  
 
<div id="contenu">
 <h2>Cette page indexe les sets de photographies.</h2>
 
 <div id="colonne_b">
  <h3>Chronologique</h3>
 </div>
 
 <div id="colonne_a">
  <h3>Indépendante</h3>
 </div>
</div>
 
 
Parfait sous Firefox, catastrophe sous IE : d'abord il prend les % en fonction de la largeur de page et non pas de celle du conteneur et puis ma div colonne_a prend 48% de l'espace restant du conteneur (?!?).
 
Un peu d'aide svp, j'ai déjà essayé pas mal de chose (imbrication des DIVs etc)mais sans succès.
 
Merci.


Message édité par Beral2 le 31-05-2005 à 14:08:38
Reply

Marsh Posté le 20-05-2005 à 15:49:01   

Reply

Marsh Posté le 20-05-2005 à 17:17:43    

div#colonne_a
 {
 position: absolute;
 left: 0;
 width: 48%;
 }
div#colonne_b
 {
 position: absolute;
 right: 0;
 width: 48%;
 }
 
IDEM, bon avec Firefox, n'importe quoi avec IE.

Reply

Marsh Posté le 21-05-2005 à 11:54:11    

Bon ben en attendant de trouver autre chose, ce sera une table.

Reply

Marsh Posté le 23-05-2005 à 11:45:07    

Salut,
je ne suis pas sûr de bien comprendre ce que tu veux faire mais voilà une correction qui pourrait peut-être te mettre sur la piste.
 
Le CSS :

Code :
  1. div#fond {
  2. margin: 46px 156px 0px 148px;
  3. }
  4. div#contenu
  5. {
  6. width:100%;
  7. }
  8. div#colonne_a
  9. {
  10. float:left;
  11. width: 48%;
  12. }
  13. div#colonne_b
  14. {
  15. float: right;
  16. width: 48%;
  17. }


Le code HTML :

Code :
  1. <div id="fond">
  2. <div id="contenu">
  3.   <h2>Cette page indexe les sets de photographies.</h2>
  4.   <div id="colonne_b">
  5.    <h3>Chronologique</h3>
  6.   </div>
  7.   <div id="colonne_a">
  8.    <h3>Indépendante</h3>
  9.   </div>
  10. </div>
  11. </div>


Comme tu peux le remarquer j'ai rajouté un div "fond" qui enveloppe ton div "contenu" et j'ai modifié les id correspondantes.
J'ai rajouté un float:left; à ta colonne_a
 
Ce n'est peut-être pas la meilleure manière, mais çà peut être un début de solution.
 
 [:fafane84]


Message édité par fafane84 le 23-05-2005 à 11:45:38

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

Marsh Posté le 31-05-2005 à 14:07:34    

fafane84: merci mon sauveur, oui cela marche maintenant. Par défaut, ie prend les pourcentages comme étant ceux de la page (et pas de la DIV dont il fait parti, le c..). Il faut donc, comme tu me l'as dit, créer une DIV presque inutile, juste pour ie, afin de fixer le 100%.
 
Sinks eu lote :) !

Reply

Marsh Posté le 31-05-2005 à 14:28:00    

Satané IE  :kaola:  
Et dire que c'est encore le navigateur le plus utilisé  :fou:  
 
Content d'avoir pu t'aider.
 
 [:fafane84]


Message édité par fafane84 le 31-05-2005 à 14:29:19

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

Marsh Posté le 28-07-2005 à 09:27:35    

Mon Dieu merci pour la fonction recherche du Forum Hardware :D J'avais exactement le même type de problème.
 
Même si je n'aime pas trop avoir un bloc qui "ne sert à rien",  ça n'est pas pire que des Hacks pour IE!
 
Merci aussi à fafane84 du coup ;)
 
Edit2:  En fait si, ça marche bien après quelques ajustements ;)


Message édité par Alphajet le 28-07-2005 à 10:02:48

---------------
Bien joué! Mais une brique ne rend jamais les coups.
Reply

Sujets relatifs:

Leave a Replay

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