web-dev-qa-db-fra.com

Deux divs côte à côte - Affichage fluide

J'essaye de placer deux divs côte à côte et d'utiliser le CSS suivant pour cela.

#left {
  float: left;
  width: 65%;
  overflow: hidden;
}

#right {
  overflow: hidden;
}

Le code HTML est simple, deux div gauche et droite dans un div wrapper.

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

J'ai essayé maintes fois de chercher une meilleure solution sur StackOverflow et sur d'autres sites, mais je n'ai pas trouvé l'aide exacte.

Ainsi, le code fonctionne bien à première vue. Le problème est que la div de gauche obtient le remplissage/marge automatiquement à mesure que j'augmente la largeur (%). Donc, à 65% de la largeur, la div de gauche a du rembourrage ou une marge et n’est pas parfaitement alignée sur la div de droite, j’ai essayé de remplir/margin 0 mais pas de chance. Deuxièmement, si je fais un zoom sur la page, la division droite glisse sous la division gauche, Son affichage n’est pas fluide.

Note: Je suis désolé, j'ai beaucoup cherché. Cette question a été posée à plusieurs reprises mais ces réponses ne m'aident pas. J'ai expliqué quel est le problème dans mon cas.

J'espère qu'il y a un correctif pour cela.

Je vous remercie.

EDIT: Désolé, problème HTML, il y avait deux div "box" à la fois à gauche et à droite, ils avaient un remplissage en%, donc le côté gauche a montré plus de remplissage en raison de la largeur supérieure. Désolé, le CSS ci-dessus fonctionne parfaitement, son affichage fluide et corrigé, désolé de poser la mauvaise question ...

csshtmlfluid-layoutfluid
184
Waleed

Utiliser ce CSS pour mon site actuel. Cela fonctionne parfaitement!

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}
89
Waleed

violon

Essayez plutôt un système comme celui-ci:

HTML:

<section class="container">
    <div class="one"></div>
    <div class="two"></div>
</section>

CSS:

.container {
    width: 80%;
    height: 200px;
    background: aqua;
    margin: auto;
    padding: 10px;
}
.one {
    width: 15%;
    height: 200px;
    background: red;
    float: left;
}
.two {
    margin-left: 15%;
    height: 200px;
    background: black;
}

Vous ne devez faire flotter qu'un seul div si vous utilisez une marge avec marge égale à la largeur du premier div. Cela fonctionnera quel que soit le zoom et n'aura pas de problèmes de sous-pixels.

221
dezman

C'est facile avec une flexbox:

#wrapper {
  display: flex;
}

#left {
  flex: 0 0 65%;
}

#right {
  flex: 1;
}
<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>
171
user4427511

Voici ma réponse pour ceux qui sont googler:

CSS:

.column {
    float: left;
    width: 50%;
}

/* Clear floats after the columns */
.container:after {
    content: "";
    display: table;
    clear: both;
}

Voici le code HTML:

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
</div>
6
Malachi Bazar