18041 sujets

Questions générales et questions de débutants

Deux div côte à côté - largeur adaptable

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 !
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é.
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.
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; }
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...))
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)
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").
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...
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...
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!
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 a écrit :
Et si tu mettais ta colonne 2 dans ta colonne 1?
Cela reviendrait à la solution que tu as déjà suggéré.
Bah normalement celle que je t'ai donné devrait fonctionner, une page en ligne pour constater le problème serait plus pratique.
Sujet clos
Aller à