Largeur DIV fluide

**pixee** · 06/08/2009, 12h10

Bonjour à tous.

j'ai un petit problème pour dimensionner un <div>, je vais essayer d'exposer clairement mon problème.

Dans un DIV que je nomme #conteneur je place 2 div en colonne DIV1 et DIV2 à l'aide de float: left; Jusqu'ici tout va bien.

Je donne une largeur en pixel au DIV1

Mon problème est que j'aimerai que le DIV2 (donc situé sur la droite de la page) prennent automatiquement la largeur restante. je ne désire pas lui attribuer une largeur en pixel, je souhaite qu'il prenne automatiquement le reste de la largeur disponible.

par défaut sur IE il prend toute la largeur restante, mais avec Firefox il prend la largeur de ce qu'il contient.

j'ai bien essayer de mettre width: 100% mais dans ce cas le DIV2 fait un retour à la ligne et prend 100% de toute la page !

Connaissez vous une solution ?

Pour les curieux mon problème se trouve à cet URL :
http://www.1001-avis.com/?page=marchand

Et il s'agit donc du div #blokdroit

Merci de vos conseils

**Doki95** · 06/08/2009, 13h39

Salut,

Pourquoi tu ne veux pas mettre ta div #blockdroit avec un width fixe en px. Pour qu'il prenne le reste de la place.

(j'ai fait le test, si tu mets le width: 319px, il sera correctement placé et prendra tout le reste de la page

)

Doki.

**pixee** · 06/08/2009, 13h46

Envoyé par Doki95

Salut,

Pourquoi tu ne veux pas mettre ta div #blockdroit avec un width fixe en px. Pour qu'il prenne le reste de la place.

(j'ai fait le test, si tu mets le width: 319px, il sera correctement placé et prendra tout le reste de la page

)

Doki.

Merci de ta réponse, mais comme indiqué dans mon post, je ne désire pas définir une taille en pixel pour ce DIV, j'y ai bien pensé mais selon le navigateur le résultat n'est pas le même (utilisation de padding qui varie selon IE ou FIREFOX).

Je désire donc savoir comment faire pour que le DIV de droite s'ajuste automatiquement sur toute la largeur. Cela fonctionne correctement sous IE, mais avec FIREFOX le div prend la largeur de son contenu.

**Doki95** · 06/08/2009, 16h02

Autant pour moi. Je n'avais pas bien lu.

Tu peux essayer de jouer avec les pourcentages. Tu n'es pas obligé de mettre un width à 100%.

**Macmillenium** · 06/08/2009, 17h19

Bonjour,

L'absence d'un doctype dans ton code déclenche le mode de rendu Quirks.

Envoyé par pixee

Dans un DIV que je nomme #conteneur je place 2 div en colonne DIV1 et DIV2 à l'aide de float: left; Jusqu'ici tout va bien.

Je donne une largeur en pixel au DIV1

Un flottant s'adapte à la taille de son contenu, il faut donc commencer par retirer le float sur DIV2

Envoyé par pixee

Mon problème est que j'aimerai que le DIV2 (donc situé sur la droite de la page) prennent automatiquement la largeur restante. je ne désire pas lui attribuer une largeur en pixel, je souhaite qu'il prenne automatiquement le reste de la largeur disponible.

Il suffit de laisser DIV1 en float:left + largeur fixe.

Ensuite, tu as deux solutions :

Attribuer à la DIV2 un margin-left = largeur de DIV1,
Conférer à la DIV2 ce qu'on appel contexte de formatage bloc(spec CSS2.1), via overflow:hidden par exemple, ce qui permet de tenir compte de l'espace réservé à son adjacent flottant.

Il faudrait également donner le Layout à la DIV2 via zoom:1 dans une CSS dédiée à IE6 entre commentaires conditionnels.
Attention toutefois au bug des 3px jog sous IE6.

Envoyé par pixee

par défaut sur IE il prend toute la largeur restante, mais avec Firefox il prend la largeur de ce qu'il contient.

Enfaite, c'est HR qui est à l'origine de cet étrange comportement.
Si le conteneur est flottant ou positionné en absolue ou fixe avec une largeur non renseignée, le HR occupe le reste de la largeur disponible dans l'ancêtre.
Sous les navigateurs moderne, la largeur d'un HR = largeur du parent direct.