สอง divs เคียงข้าง - จอแสดงผลของไหล

ฉันพยายามวางสอง divs เคียงข้างกันและใช้ CSS ต่อไปนี้เพื่อมัน

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

#right {
  overflow: hidden;
}

HTML นั้นง่าย div สองตัวทางซ้ายและขวาใน div wrapper

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

ฉันได้ลองหลายครั้งเพื่อค้นหาวิธีที่ดีกว่าใน StackOverflow และเว็บไซต์อื่น ๆ ด้วย แต่ไม่พบความช่วยเหลือที่แน่นอน

ดังนั้นรหัสทำงานได้อย่างรวดเร็วในครั้งแรก ปัญหาคือสิ่งนี้ div ด้านซ้ายได้รับการเติมเต็ม / ระยะขอบโดยอัตโนมัติเมื่อฉันเพิ่มความกว้างเป็น (%) ดังนั้นที่ความกว้าง 65% div ด้านซ้ายมีช่องว่างภายในหรือขอบและไม่สอดคล้องกับ div ที่ถูกต้องฉันพยายาม padding / margin 0 แต่ไม่มีโชค ประการที่สองถ้าฉันซูมในหน้า div ที่ถูกต้องจะเลื่อนลงด้านล่าง div ด้านซ้ายมันไม่เหมือนกับการแสดงผลแบบของเหลว

หมายเหตุ: ฉันขอโทษฉันค้นหามาก คำถามนี้ถูกถามหลายครั้ง แต่คำตอบเหล่านั้นไม่ได้ช่วยฉัน ฉันได้อธิบายสิ่งที่เป็นปัญหาในกรณีของฉัน

ฉันหวังว่าจะมีการแก้ไขสำหรับสิ่งนั้น

ขอบคุณ.

แก้ไข: ขออภัยฉันปัญหา HTML, มีสอง "กล่อง" divs ทั้งในด้านซ้ายและด้านขวาพวกเขามีช่องว่างภายใน%, ด้านซ้ายแสดงให้เห็นช่องว่างภายในมากขึ้นเนื่องจากความกว้างมากขึ้น ขออภัย 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;
}

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

คุณจำเป็นต้องลอยหนึ่ง div ถ้าคุณใช้ระยะขอบซ้ายบนอื่น ๆ เท่ากับความกว้างของ div แรก สิ่งนี้จะทำงานได้ไม่ว่าจะซูมอะไรและจะไม่มีปัญหาพิกเซลย่อย

นี่เป็นเรื่องง่ายด้วย 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>

ใช้ CSS นี้สำหรับเว็บไซต์ปัจจุบันของฉัน มันใช้งานได้สมบูรณ์แบบ!

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

นี่คือคำตอบของฉันสำหรับผู้ที่ Googling:

CSS:

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

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

นี่คือ HTML:

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

ทำให้ div ทั้งสองเป็นแบบนี้ สิ่งนี้จะจัดแนว divs ทั้งสองแบบเคียงข้างกัน

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

ระยะขอบขวาไม่จำเป็นต้องใช้