Les mystères du CSS

Mr Moule · 2016-02-23 11:27:13

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)

jojolaglaise · 2016-02-23 12:09:05

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)

Mr Moule · 2016-02-23 12:34:55

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

Bonne journée à toi

Annonce

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

Les mystères du CSS

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

Re: Les mystères du CSS

Code (css) :

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

Re: Les mystères du CSS

Pied de page des forums