Annonce

>>> Bienvenue sur codelab! >>> Première visite ? >>> quelques mots sur codelab //// une carte des membres//// (apéros) codelab

17 mai 2019 : accident de la base de données : plus d'infos

#1 2016-02-23 11:27:13 Les mystères du CSS

Mr Moule
nouveau membre
Date d'inscription: 2015-12-03
Messages: 6

Les mystères du CSS



Bonjour à tous
Je monte en ce moment mon site web, et je suis face à un "problème" (entre guillemet car je l'ai résolu, mais j'ai la net impression que c'est de la grosse bricole, et que ça risque de se casser la gueule au moindre moment).

Voici l'idée :
Une div"contenu" dans laquelle sont contenues deux autres div : div"contenu_gauche" et la div"contenu_droite".

L'idée c'est que la colonne de gauche puisse défiler pendant que celle de droite soit fixe. Cependant, je souhaite que le contenu de droite soit calé à droite (comme avec un float:right) et qu'elle ne se superpose pas à celle de gauche (j'espère être clair).
voilà le css :

div#contenu_gauche {
    float: left;
    width: 64%;
    height: 100%;
    margin-left: 3%;
}

div#colone_droite {
    position: fixed;
    height: 100%;
    width: 26%;
    margin: 6px 0 0 57%;
}

comme vous pouvez le voir, j'ai mit un gros gros margin-right, puisque quand je float, ça ne fonctionne pas. Je m'adresse donc à vous pour savoir si il existe une solution plus "propre".

Merci à vous amis codelabeur !

Ps : je joins une image pour que vous puissiez voir la chose dans son ensemble.

Dernière modification par Mr Moule (2016-02-23 11:31:11)

Hors ligne

 

#2 2016-02-23 12:09:05 Re : Les mystères du CSS

jojolaglaise
membre
Lieu: Basse Normandie
Date d'inscription: 2014-04-20
Messages: 137
Site web

Re: Les mystères du CSS



Bonjour !

Quelque chose comme ça ? J'ai utilisé l'attribut inline-block pour que les deux div soient côte à côte sans se chamailler…

Code (css) :

#contenuGauche{
      width:64%;
      float:left;
      display: inline-block;
      min-height:100vh;
      height: 100%;
      background-color: yellow;
    }

    #contenuDroite {
      width: 26%;
      float: left;
      position: fixed;
      overflow: hidden;
      display: inline-block;
    }

edit: piece jointe

Dernière modification par jojolaglaise (2016-02-23 12:19:40)

Hors ligne

 

#3 2016-02-23 12:34:55 Re : Les mystères du CSS

Mr Moule
nouveau membre
Date d'inscription: 2015-12-03
Messages: 6

Re: Les mystères du CSS



Exactement comme ça. Merci beaucop Jojolaglaise, je n'avais pas pensé à utiliser "inline-block", mes compétences en sont encore à leurs prémices smile

Bonne journée à toi

Hors ligne

 

fil rss de cette discussion : rss

Pied de page des forums

Powered by FluxBB

codelab, graphisme & code : emoc / 2008-2020