Float can't cover my entire background. Why is that?

Question

I have two divs in my html file both with 50% width. Left's position is fixed and the right's position must be scrollong. I set it float. Problem is, there's a white space around my floating div background:

My code:

for (i = 0; i < 100; i++) {
  document.write(" <br>");
}

.left {
  flex: 1;
  left: 0;
  width: 50%;
  background-color: #ffc30b;
  height: 100vh;
  position: fixed;
  top: 0;
}

.left p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.right {
  background-size: cover;
  width: 50%;
  background-color: black;
  float: right;
}

<body>
  <section id="about">
    <div class="left">
      <p class="header">ABOUT</p>
    </div>

    <div class="right">
      <div class="aboutimg"><img src="img.png" alt="me|Jessa" width="200" height="200" /></img>
      </div>

    </div>
  </section>
</body>

enter image description here

score -1 · Answer 1 · answered Nov 07 '19 at 12:38

-1

Try adding this

body {
  margin: 0;
}

answered Nov 07 '19 at 12:38

maciejze

177
7

Please describe in your answer, what was the problem, and how will this snippet solve it, to help others understand this answer – FZs Nov 07 '19 at 14:17
Thank you, maciejze! But it didn't work. Hehe. – Jessa Amor Nov 08 '19 at 03:22

Float can't cover my entire background. Why is that?

1 Answers1