1. #1
    Membre régulier
    Profil pro
    Inscrit en
    mai 2003
    Messages
    386
    Détails du profil
    Informations personnelles :
    Âge : 36
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : mai 2003
    Messages : 386
    Points : 118
    Points
    118

    Par défaut Colonne "responsive" et une fixe

    Bonjour,

    un soucis tout bête que je ne parviens pas à résoudre pourtant il semble simple

    je souhaite avoir une colonne qui s'adapte à la largeur de l'écran et une colonne fixe à droite de 300px je fais le code suivant
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
     
    <style>
    .col1 {
    	background-color: #009;
    	margin-right: 300px;
    }
    .col2 {
    	background-color: #0F0;
    	width: 250px;
    	float: right;
    }
    </style>
     
    <div>
      <div class="col1">fff</div>
      <div class="col2">ffff</div>
    </div>
    mon problème est que la col2 n'est pas sur la même ligne que la col1

    merci d'avance
    bonne après midi

  2. #2
    Membre régulier
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    juillet 2016
    Messages
    65
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 23
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Intégrateur Web

    Informations forums :
    Inscription : juillet 2016
    Messages : 65
    Points : 106
    Points
    106

    Par défaut

    Inverse ton col1 et col2 dans ton code html et enlève ton margin-right :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     
    <style>
    .col1 {
    	background-color: #009;
    }
    .col2 {
    	background-color: #0F0;
    	width: 250px;
    	float: right;
    }
    </style>
     
    <div>
      <div class="col2">ffff</div>
      <div class="col1">fff</div>
    </div>

  3. #3
    Membre régulier
    Profil pro
    Inscrit en
    mai 2003
    Messages
    386
    Détails du profil
    Informations personnelles :
    Âge : 36
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : mai 2003
    Messages : 386
    Points : 118
    Points
    118

    Par défaut

    tout simplement....
    merci beaucoup

  4. #4
    Membre régulier
    Profil pro
    Inscrit en
    mai 2003
    Messages
    386
    Détails du profil
    Informations personnelles :
    Âge : 36
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : mai 2003
    Messages : 386
    Points : 118
    Points
    118

    Par défaut

    cela fonctionne en exemple simple mais plus complexe non

  5. #5
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    373
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 373
    Points : 478
    Points
    478

    Par défaut

    Il me semble que flex pourrait résoudre ce problème très simplement et sans l'utilisation de float et être responsive.

  6. #6
    Membre régulier
    Profil pro
    Inscrit en
    mai 2003
    Messages
    386
    Détails du profil
    Informations personnelles :
    Âge : 36
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : mai 2003
    Messages : 386
    Points : 118
    Points
    118

    Par défaut

    j'ai reinversé les colonnes mis un flex sur le div conteneur supprimer les float les colonnes sont ok sauf la largeur pourtant bien préciser 300px

  7. #7
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 397
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 397
    Points : 20 761
    Points
    20 761

    Par défaut

    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  8. #8
    Membre régulier
    Profil pro
    Inscrit en
    mai 2003
    Messages
    386
    Détails du profil
    Informations personnelles :
    Âge : 36
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : mai 2003
    Messages : 386
    Points : 118
    Points
    118

    Par défaut


  9. #9
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    373
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 373
    Points : 478
    Points
    478

    Par défaut

    Ben comme Jreaux62 le dit, personne n'est Irma la voyante!
    Sans un minimum de css et html, il est difficile d'aider!
    code, code code dec.

  10. #10
    Membre régulier
    Profil pro
    Inscrit en
    mai 2003
    Messages
    386
    Détails du profil
    Informations personnelles :
    Âge : 36
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : mai 2003
    Messages : 386
    Points : 118
    Points
    118

    Par défaut

    je comprend très bien mais pour le moment ce n'est pas visible sinon je vous aurais donner le lien c'est pour un forum vbulletin rajouter une colonne sur les messages afin d’afficher les articles du sites mais du coup je vais mettre cela en ligne plus tot pour avoir de l'aide...

  11. #11
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 397
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 397
    Points : 20 761
    Points
    20 761

    Par défaut

    Bonjour,

    ce n'est pourtant pas difficile de montrer un bout de code :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <div id="main">
      <div class="col1">col1</div>
      <div class="col2">col2</div>
    </div>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    #main {
     display:-webkit-flex; display:flex; 
    }
    #main > div.col1 {
     -webkit-flex:1 1 auto; flex:1 1 auto; 
      background:yellow;
    }
    #main > div.col2 {
     -webkit-flex:0 0 300px; flex:0 0 300px; 
      background:green;
    }
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  12. #12
    Membre régulier
    Profil pro
    Inscrit en
    mai 2003
    Messages
    386
    Détails du profil
    Informations personnelles :
    Âge : 36
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : mai 2003
    Messages : 386
    Points : 118
    Points
    118

    Par défaut

    je viens d'essayer sur ce forum vu que c'est un vbulletin aussi cela fonctionne

    j'ai donc un soucis avec mon template sur le miens du coup... si vous souhaitez vraiment le voir il faut vous rendre ici https://www.lelectronique.com/forum-electronique/ vous inscrire et me donner votre identifiant par MP afin que je vous mette le template en test j'ai vu que l'on pouvait le faire

  13. #13
    Membre régulier
    Profil pro
    Inscrit en
    mai 2003
    Messages
    386
    Détails du profil
    Informations personnelles :
    Âge : 36
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : mai 2003
    Messages : 386
    Points : 118
    Points
    118

    Par défaut

    je viens de mettre le théme sur le forum par défaut par exemple ici https://www.lelectronique.com/forum-...2721#post72721
    en bas de la discution un div test à mettre sur le cote droit

    bon fin de journée

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