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

Question

J'essaie de placer deux divs côte à côte et j'utilise la CSS suivante pour cela.

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

#right {
  overflow: hidden;
}

Le code HTML est simple, deux div de gauche et de droite dans un div d'emballage.

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

J'ai essayé tant de fois de chercher un meilleur moyen sur StackOverflow et d'autres sites aussi, mais je n'ai pas pu trouver l'aide exacte.

Donc, le code fonctionne bien à première vue. Le problème est le suivant : la division de gauche est automatiquement remplacée par une marge lorsque j'augmente la largeur en (%). Ainsi, à 65% de la largeur, la division de gauche a un peu de rembourrage ou de marge et n'est pas parfaitement alignée avec la division de droite. J'ai essayé de mettre un rembourrage/marge de 0 mais sans succès. Deuxièmement, si je zoome dans la page, la division de droite glisse sous la division de gauche, comme si l'affichage n'était pas fluide.

Note : Je suis désolé, j'ai beaucoup cherché. Cette question a été posée de nombreuses fois 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 une solution à ce problème.

Gracias.

EDIT : Désolé, j'ai un problème de HTML, il y avait deux divs "box" sur les côtés gauche et droit, ils avaient un padding en %, donc le côté gauche montrait plus de padding à cause de la plus grande largeur. Désolé, le CSS ci-dessus fonctionne parfaitement, son affichage est fluide et fixe, Désolé d'avoir posé la mauvaise question...

Answer 1

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

.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;
}

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

Vous ne devez faire flotter qu'une seule div si vous utilisez une marge gauche sur l'autre div égale à la largeur de la première div. Cela fonctionnera quel que soit le zoom et ne posera pas de problèmes de sous-pixels.

Answer 2

C'est facile avec un 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>

Answer 3

J'utilise ce CSS pour mon site actuel. Il fonctionne parfaitement !

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

Answer 4

Voici ma réponse pour ceux qui cherchent sur Google :

CSS :

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

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

Voici le HTML :

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
</div>

Answer 5

Faites les deux divs comme ceci. Cela permettra d'aligner les deux divs côte à côte.

.my-class {
  display : inline-flex;
}