Aller au contenu

Problème étirement DIV


Régis

Sujets conseillés

Bonjour,

Après multe essais, je craque :boude: ... Alors, je demande :

Une div "conteneur" contient 3 autres div (droite, centre, gauche) en position absolu.

Mon problème est le suivant :

- la div "conteneur" s'étire en hauteur lorsque le contenu de la div "centre" est plus long que les div "droite" et "gauche" ;

- mais ne s'étire pas lorsque la div "droite" ou "gauche" possède plus de contenu que la div "centre".

Mon test online : le code est ici et le CSS est ....

Comment puis-je faire pour que mon div "conteneur" s'étire, lui aussi ?

PS : le débordement de la div "droite" à droite du conteneur est lui volontaire....

Modifié par gatcweb
Lien vers le commentaire
Partager sur d’autres sites

Salut Régis,

Et oui, retour de l'éternel problème ! :)

J'ai déjà eu l'occasion de faire face à ce type de difficulté... et je l'avais résolu en mettant un <br style="clear:both;" /> juste avant le </div> de fermeture (celui du div conteneur).

Dan

Lien vers le commentaire
Partager sur d’autres sites

Posté (modifié)
Et oui, retour de l'éternel problème ! :)

J'ai déjà eu l'occasion de faire face à ce type de difficulté... et je l'avais résolu en mettant un <br style="clear:both;" /> juste avant le </div> de fermeture (celui du div conteneur).

Merci DAN,

Euuuh, j'ai testé et cela ne fonctionne pas...

A moins que quelque chose m'ai échappé.... :boude:

??

Modifié par gatcweb
Lien vers le commentaire
Partager sur d’autres sites

Hé ba mon pauvre, j'ai galéré également pendant un bon moment sur le problême pour finalement demander la réponse au forum alsa:

Tiens ta solution ca te fera gagner du temps ;) :

Comme je n'en suis pas l'auteur je te laisse lire ca

Lien vers le commentaire
Partager sur d’autres sites

Hé ba mon pauvre, j'ai galéré également pendant un bon moment sur le problême pour finalement demander la réponse au forum alsa:

Merci michmuch51, :D

Je vais de ce pas voir cela... et testerai demain...

@+

Lien vers le commentaire
Partager sur d’autres sites

bonjour,

dis-moi Régis, est-ce que ton problème est résolu ? Parce que ta mise en page est intéressante. Donc, j'ai suivi les liens, fais de nombreux tests (positionnement absolu, flottant) mais impossible d'avoir le résultat. Enfin presque, j'ai réussi à avoir le conteneur qui s'agrandit qu'elle que soit le colonne qui "déborde", avec un positionnement flottant, mais malheureusement avec IE, la colonne de droite qui sort du conteneur s'est retrouvée à moitié cachée.

gauche : http://www.level141.net/test/gauche.html

centre : http://www.level141.net/test/centre.html

droite : http://www.level141.net/test/droite.html

css : http://www.level141.net/test/08.css

Tous les autres liens proposés apprennent des choses mais ne répondent pas au problème : design à 3 colonnes à longueur variable dans un bloc avec une colonne qui déborde sur le côté. J'ai été le premier à penser pourquoi la colonne de gauche ou de droite serait plus grande que les autres, si c'est un menu par exemple. Mais plutôt que de se forcer à avoir le contenu suffisamment grand, autant trouver le code CSS qui donne le résultat souhaité.

quelqu'un a-t-il une solution ?

skale

Modifié par skale
Lien vers le commentaire
Partager sur d’autres sites

dis-moi Régis, est-ce que ton problème est résolu ? Parce que ta mise en page est intéressante. (...)

Bonjour skale,

et merci de t'être penché sur mon problème...

Je n'ai pas réussi à le résoudre... :boude:, aussi j'ai choisi une autre solution, plus complexe, (après différents test et recherches) et qui fonctione sous FF & IE6.

Voici le code et le CSS

A ton avis ?

Lien vers le commentaire
Partager sur d’autres sites

bonjour,

la nouvelle mise en page est pas mal, et elle fonctionne aussi sous Opera. Tu pouvais peut-être faire plus simple. En revanche, si la bulle doit rester ici, si elle ne grandit pas, il est possible d'avoir le design précédent en mélangeant nos 2 codes, positionnement flottant pour la colonne B et positionnement absolu pour la bulle.

ce qui donne, centre, gauche, css

@+

skale

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...