IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Largeur DIV fluide


Sujet :

Dimensionnement en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre du Club
    Inscrit en
    Octobre 2007
    Messages
    9
    Détails du profil
    Informations forums :
    Inscription : Octobre 2007
    Messages : 9
    Par défaut Largeur DIV fluide
    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

  2. #2
    Membre éprouvé
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    167
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : Mai 2009
    Messages : 167
    Par défaut
    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.

  3. #3
    Membre du Club
    Inscrit en
    Octobre 2007
    Messages
    9
    Détails du profil
    Informations forums :
    Inscription : Octobre 2007
    Messages : 9
    Par défaut
    Citation Envoyé par Doki95 Voir le message
    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.

  4. #4
    Membre éprouvé
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    167
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : Mai 2009
    Messages : 167
    Par défaut
    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%.

  5. #5
    Rédacteur
    Avatar de Macmillenium
    Homme Profil pro
    Développeur front-end
    Inscrit en
    Mars 2008
    Messages
    2 333
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur front-end
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 2 333
    Par défaut
    Bonjour,

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


    Citation Envoyé par pixee Voir le message
    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

    Citation Envoyé par pixee Voir le message
    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 :


    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.

    Citation Envoyé par pixee Voir le message
    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.

  6. #6
    Membre du Club
    Inscrit en
    Octobre 2007
    Messages
    9
    Détails du profil
    Informations forums :
    Inscription : Octobre 2007
    Messages : 9
    Par défaut


    Voila une réponse très détaillé, je vais essayer de suivre et de tester tout ça. Mais cela me parait bien compliqué ...

  7. #7
    Membre du Club
    Inscrit en
    Octobre 2007
    Messages
    9
    Détails du profil
    Informations forums :
    Inscription : Octobre 2007
    Messages : 9
    Par défaut
    Citation Envoyé par Macmillenium Voir le message
    Il faudrait également donner le Layout à la DIV2 via zoom:1
    Bonjour,
    J'ai du mal à comprendre l'utilité de rajouter zoom:1 ?
    Pourquoi doit on rajouter cette propritété zoom:1 ?

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. contrôle hauteur et largeur div par rapport à l'écran
    Par cyrano_de_bergerac dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 23/02/2012, 11h35
  2. largeur div dans un template de page
    Par Sniper37 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 16/11/2009, 15h08
  3. largeur <div> sous IE7
    Par michel18 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 12/10/2007, 20h20
  4. [casse-tete (pour moi)] recuperer la largeur d'un <div>
    Par Invité dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 05/11/2004, 07h39

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo