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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1090879
Beral2
Posté le 20-05-2005 à 15:49:01  profilanswer
 

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
mood
Publicité
Posté le 20-05-2005 à 15:49:01  profilanswer
 

n°1091013
Beral2
Posté le 20-05-2005 à 17:17:43  profilanswer
 

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.

n°1091521
Beral2
Posté le 21-05-2005 à 11:54:11  profilanswer
 

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

n°1093191
fafane84
Posté le 23-05-2005 à 11:45:07  profilanswer
 

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
n°1102896
Beral2
Posté le 31-05-2005 à 14:07:34  profilanswer
 

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

n°1102929
fafane84
Posté le 31-05-2005 à 14:28:00  profilanswer
 

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
n°1162563
Alphajet
Faites le vous-même!
Posté le 28-07-2005 à 09:27:35  profilanswer
 

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.

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

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

 

Sujets relatifs
[Résolu] Créer des contrôles dynamiquement sur une form[Résolu] javascript pour modifier un texte dans un <td>
[Résolu]Comment chercher si un formulaire est ouvert ?[Struts/Java] Récupérer l'url utilisée pour arriver là. [résolu]
Chaine String [RESOLU][Access / ASP ] Comparaison heure (access) et chaine (ASP) [resolu]
[DOM] Remplacement d'un input par un autre [Résolu][css] blocs qui apparaissent sur clic [résolu]
[résolu] [javascript/css] placer une image après actioninclude dans un array [resolu]
Plus de sujets relatifs à : [Résolu] 2 DIVs "fluides" dans un conteneur "fluide".


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