流體顯示：兩個 Div 並排排列

Question

我正在嘗試並排放置兩個 div 並使用以下 CSS。

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

#right {
  overflow: hidden;
}

HTML 很簡單，一個包裝 div 中包含左右兩個 div。

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

我在 StackOverflow 和其他網站上嘗試了很多次尋找更好的方法，但找不到確切的幫助。

所以，乍一看，程式碼運作良好。問題是，當我增加寬度（%）時，左側 div 會自動獲得填充/邊距。因此，在 65% 寬度時，左側 div 有一些填充或邊距，並且與右側 div 不完全對齊，我嘗試將填充/邊距設為 0 但沒有成功。其次，如果我放大頁面，右側 div 會滑到左側 div 下方，這就像不流暢的顯示。

註：抱歉，我查了很多資料。這個問題已被問過很多次，但這些答案對我沒有幫助。我已經解釋了我的案例中的問題所在。

我希望能解決這個問題。

謝謝。

編輯：抱歉，我的 HTML 問題，左側和右側都有兩個“box”div，它們的填充以％為單位，因此左側由於寬度較大而顯示更多填充。抱歉，上面的 CSS 工作完美，其流暢的顯示和固定，抱歉問了錯誤的問題...

Answer 1

嘗試這樣的系統：

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

如果您在另一個 div 上使用 margin-left 等於第一個 div 的寬度，則只需浮動一個 div 即可。無論縮放多少，這都可以工作，並且不會出現子像素問題。

Answer 2

將此 CSS 用於我目前的網站。效果完美！

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