Suivez les fils RSS
 
Auteur
bibos
# 13 Mar 2010 - 10:17:24
Citer
8 Posts
Bonjour à tous,

Voilà mon soucis : j'ai un div conteneur (div 1) dans lequel se trouve deux div (div 2 et div 3).
J'aimerais que div 3 ait une largeur fixe et que la largeur de div 2 s'adapte en fonction.
Et j'aimerais que si div 3 n'existe pas, div 2 prenne donc toute la largeur.

Voici un schéma ci-dessous pour mieux comprendre :

upload/27887-schema.jpg

Merci d'avance pour toute aide !

^
Mikachu
# 13 Mar 2010 - 10:27:16
Citer
C'est quand les vacances ?
Modérateur
5136 Posts
Salut,

Il va te falloir t'intéresser au positionnement flottant, qui sera le seul à même de répondre à ton besoin :
Guide de survie du positionnement CSS

Une page en ligne ou au moins l'intégralité du code html et css ça aide à vous aider plus vite !

http://www.mikachudesign.com/ 
^
bibos
# 15 Mar 2010 - 11:46:28
Citer
8 Posts
Oui c'est ce que j'utilise...
Mon problème c'est que ça fonctionne bien uniquement si je précise la largeur de mon div2 ! Ce que je ne veux pas faire puisque je veux qu'il puisse prendre toute la largeur si mon div3 n'est pas affiché.

Et si je ne précise pas la largeur, mon div3 se place en dessous de mon div2 et non à côté.

^
Laurie-Anne
# 15 Mar 2010 - 11:51:57
Citer
Modérateur
5736 Posts
Bonjour,

Ce cas de figure ne devrait pas posser problème, pourrais-tu nous montrer le code que tu as testé (ou une page en ligne, c'est encore mieux) pour que l'on voie où se situe le problème.

http://laurie-anne.bourdain.name 
^
bibos
# 15 Mar 2010 - 11:56:47
Citer
8 Posts
Bonjour,

Voilà mon HTML :

<div id="contenu">

<div id="colonne1"></div>
<div id="colonne2"></div>
<div id="spacer"></div>

</div>


Et mon CSS :

#contenu {	padding:20px; }

#colonne1 { float:left; }
#colonne2 { float:left; width:200px; }

#spacer { clear:both; }


^
Laurie-Anne
# 15 Mar 2010 - 12:03:24
Citer
Modérateur
5736 Posts
Essaye :

<div id="contenu">
<div id="colonne2"></div>
<div id="colonne1"></div>
</div>


#contenu {
padding:20px;
overflow:hidden;
}
#colonne2 {
float:right; width:200px;
}


(accessoirement, si la colonne de droite contient le menu c'est plus agréable qu'il apparaisse avant le contenu dans le code (habitudes des visiteurs...))

http://laurie-anne.bourdain.name 
^
bibos
# 15 Mar 2010 - 12:17:03
Citer
8 Posts
Alors, on avance... (et déjà merci pour ça !)

Ca fonctionne sur IE pas pas sur Firefox !
Sur ce dernier ma colonne1 passe en dessous de ma colonne2 !

Et le overflow ne semble servir à rien.
Modifié par bibos (15 Mar 2010 - 12:19)

^
Laurie-Anne
# 15 Mar 2010 - 12:22:54
Citer
Modérateur
5736 Posts
bibos a écrit :
Sur ce dernier ma colonne1 passe en dessous de ma colonne2 ! Et le overflow ne semble servir à rien.
Cela arrive si la colonen1 n'a pas la place nécessaire pour s'insérer. Le overflow n'as rien à voir là dedans (il est juste une alternative au spacer pour que les flottants ne dépassent pas de la div "contenu").

http://laurie-anne.bourdain.name 
^
bibos
# 15 Mar 2010 - 12:35:29
Citer
8 Posts
Laurie-Anne a écrit :
Cela arrive si la colonen1 n'a pas la place nécessaire pour s'insérer.


Pourtant je n'ai que du texte dans ma colonne1...

^
bibos
# 15 Mar 2010 - 13:10:23
Citer
8 Posts
En fait dès qu'une ligne de texte est suffisamment longue pour aller "buter" contre ma colonne2, ma colonne1 passe en dessous...

Je reste bloqué avec mon obligation de donner une largeur fixe à ma colonne1...

^
juliesunset
# 15 Mar 2010 - 15:12:04
Citer
411 Posts
Salut!
J'ai eu un problème semblable récemment, ma solution? Éliminer le bloc qui doit prendre tout l'espace et écrire directement dans mon contenu en plaçant mes flottants avant le texte.

Dans ton cas ça donnerais quelque chose comme ça:

<div id="contenu">
<div id="colonne2"></div>
<p>ton texte</p>
</div>

Mais j'ignore si ça conviendra dans ton cas, à essayer donc!

Julie

^
bibos
# 15 Mar 2010 - 15:40:34
Citer
8 Posts
Malheureusement ça ne me conviendrait pas, car je n'ai pas que du texte dans ma colonne1, et ça risquerait de me compliquer drôlement la vie...

Mais il doit y avoir une solution je pense... ça me parait quand même du B.A.BA comme problème... je dois passer à côté de quelque chose !
Modifié par bibos (15 Mar 2010 - 15:41)

^
juliesunset
# 15 Mar 2010 - 15:55:40
Citer
411 Posts
Et si tu mettais ta colonne 2 dans ta colonne 1?

Julie

^
Laurie-Anne
# 15 Mar 2010 - 16:00:08
Citer
Modérateur
5736 Posts
juliesunset a écrit :
Et si tu mettais ta colonne 2 dans ta colonne 1?
Cela reviendrait à la solution que tu as déjà suggéré.

http://laurie-anne.bourdain.name 
^
juliesunset
# 15 Mar 2010 - 16:02:52
Citer
411 Posts
En théorie oui... mais des fois que... rolleyes

Julie

^
bibos
# 16 Mar 2010 - 08:51:36
Citer
8 Posts
Bon ben si quelqu'un trouve une solution, je suis preneur !

^
Laurie-Anne
# 16 Mar 2010 - 08:57:02
Citer
Modérateur
5736 Posts
Bah normalement celle que je t'ai donné devrait fonctionner, une page en ligne pour constater le problème serait plus pratique.

http://laurie-anne.bourdain.name 
^