Два divs бок о бок - Дисплей жидкости

Я пытаюсь разместить два 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, я пытался отложить /margin 0, но не повезло. Во-вторых, если я увеличиваю страницу, правый div скользит ниже левого div, как будто не отображается жидкостью.

Примечание: Извините, я искал много, этот вопрос задавался много раз, но эти ответы мне не помогают, я объяснил, что является проблемой в моем случае.

Я надеюсь, что для этого есть исправление.

Спасибо.

EDIT: Извините, мне проблема с HTML. В левой и правой частях было два "бокса". У них было заполнение в%, поэтому левая сторона показывала больше отступов из-за большей ширины. Извините, вышеприведенный CSS работает отлично, его жидкостный дисплей и исправлено, Извините за неправильный вопрос....

Ответы

Ответ 1

Использование этого CSS для моего текущего сайта. Он отлично работает!

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

Ответ 2

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

Вам нужно только плавать один div, если вы используете margin-left на другом, равном первой ширине div. Это будет работать независимо от масштаба и не будет иметь проблем с подпикселем.

Ответ 3

Это легко с помощью flexbox:

#wrapper {
  display: flex;
}
#left {
  flex: 0 0 65%;
}
#right {
  flex: 1;
}