两个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问题，左侧和右侧都有两个“盒子”div，它们的填充率为％，因此左侧显示更多填充，因为宽度更大。对不起，上面的CSS工作完美，流畅的显示和固定，抱歉提出错误的问题......

Answer 1

Fiddle

尝试使用这样的系统：

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

如果你在另一个上使用margin-left等于第一个div的宽度，你只需要浮动一个div。无论缩放是什么，这都将有效，并且不会出现子像素问题。

Answer 2

使用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

将此CSS用于我当前的站点。它完美无缺！

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

Answer 4

以下是谷歌搜索的答案：

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>