Плавающее право толкает div к концу страницы

Question

Я пытаюсь поставить 2 деления рядом.Тем не менее, когда вы делаете это, один div помещается в самую правую часть страницы?Я не уверен, почему он это делает.Любая помощь приветствуется:)

JSFIDDLE: https://jsfiddle.net/7crhg2L8/

HTML:

<div class="navrectangle"></div>
<div class="addrectangle"></div>

CSS:

.navrectangle{
  width: 20Vw;
  height: 100vh;
background-image: linear-gradient(to right, #002067, #013d98);
float: left;
}
/** SECOND RECTANGLE **/
.addrectangle{
  float:right;
  width: 20Vw;
  height: 100vh;
background-image: linear-gradient(to right, #002067, #013d98);
}

Answer 1

Вам нужно сдвинуть оба деления влево, чтобы они были рядом друг с другом.

.navrectangle{
  width: 20Vw;
  height: 100vh;
background-image: linear-gradient(to right, #002067, #013d98);
float: left;
}
/** SECOND RECTANGLE **/
.addrectangle{
  float:left;
  display: inline-block;
  width: 20Vw;
  height: 100vh;
background-image: linear-gradient(to right, #002067, #013d98);
}

Answer 2

Поместите div в родительский div и задайте стиль этого родительского div, чтобы объединить ширину двух div, в вашем случае 40vw.

CSS:

.navrectangle {
  width: 20vw;
  height: 100vh;
  background-image: linear-gradient(to right, #002067, #013d98);
  float: left;
}
/** SECOND RECTANGLE **/
.addrectangle {
  float:right;
  display: inline-block;
  width: 20vw;
  height: 100vh;
background-image: linear-gradient(to right, #002067, #013d98);
}

#container {
  width: 40vw;
}

HTML:

<div id="container">
<div class="navrectangle"></div>
<div class="addrectangle"></div>
</div>

Надеюсь, это то, что вы искали