Dwa divy obok siebie - Wyświetlacz płynów

Próbuję umieścić dwa div obok siebie i używam do tego następującego CSS.

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

#right {
  overflow: hidden;
}

HTML jest prosty, dwa lewy i prawy div w otoku otoki.

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

Wiele razy próbowałem znaleźć lepszy sposób na StackOverflow i innych witrynach, ale nie mogłem znaleźć dokładnej pomocy.

Tak więc kod działa dobrze na pierwszy rzut oka. Problem polega na tym, że lewy div automatycznie uzupełnia margines / margines, gdy zwiększam szerokość w (%). Tak więc przy szerokości 65% lewy div ma trochę dopełnienia lub marginesu i nie jest idealnie wyrównany z prawym div, próbowałem dopełnić / margines 0, ale nie miałem szczęścia. Po drugie, jeśli powiększę stronę, prawy div przesunie się poniżej lewego div, To jest jak nie płynny wyświetlacz.

Uwaga: przepraszam, dużo szukałem. To pytanie było zadawane wiele razy, ale te odpowiedzi mi nie pomagają. Wyjaśniłem, na czym polega problem w moim przypadku.

Mam nadzieję, że jest to naprawione.

Dziękuję Ci.

EDYCJA: Przepraszam, problem z HTMLem. Były dwa divy „box” po lewej i prawej stronie, miały one dopełnienie w%, więc lewa strona pokazała więcej dopełnienia z powodu większej szerokości. Przepraszamy, powyższy CSS działa idealnie, jego płynny wyświetlacz jest naprawiony. Przepraszamy za zadawanie niewłaściwych pytań ...

Zamiast tego wypróbuj taki system:

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

Musisz unosić tylko jeden div, jeśli użyjesz marginesu po lewej na drugim równym szerokości pierwszego diva. Będzie to działać bez względu na powiększenie i nie będzie miało problemów z subpikselami.

Jest to łatwe dzięki 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>

Używam tego CSS do mojej bieżącej strony. Działa idealnie!

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

Oto moja odpowiedź dla tych, którzy są google:

CSS:

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

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

Oto HTML:

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

Wykonaj oba divy w ten sposób. Spowoduje to wyrównanie obu div obok siebie.

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

   <div style="height:50rem; width:100%; margin: auto;">
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left; background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
   </div>

margines z prawej strony nie jest jednak potrzebny.