CODEWITHSUNDEEP
htmlcsspositioncss-float
GoGoAllen
GoGoAllen

Reputation: 117

Floating right pushes div to the end of the page

I am trying to put 2 divs side by side. However, when doing this, one div is pushed to the very right of the page? I am not sure why it is doing this. Any help is appreciated :)

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

Upvotes: 0

Views: 141

Answers (2)

JayG.Dev
JayG.Dev

Reputation: 313

You need to float both divs left to have them next to each other.

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

Upvotes: 1

Anton Christensen
Anton Christensen

Reputation: 36

Put the divs in a parent div and style that parent div to have the width of the two divs combined, in your case 40vw.

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

The HTML:

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

Hope this is what you were looking for

Upvotes: 0

Related Questions