CODEWITHSUNDEEP
htmlcss
Lawren Lafitte
Lawren Lafitte

Reputation: 11

"float: left" not working as intended

body {
  margin: 0;
}
.container {
  width: 100vw;
  height: 100vh;
  background-color: red;
}
.item {
  width: 33.33vw;
  height: 33.33vw;
  float: left;
}
#featured {
  background-color: green;
  width: 66.66vw;
}
#vertical {
  background-color: blue;
  height: 66.66vw;
}
#normal01 {
  background-color: pink;
}
#normal02 {
  background-color: yellow;
}
<div class="container">
  <div class="item" id="featured">
  </div>
  <div class="item" id="vertical">
  </div>
  <div class="item" id="normal01">
  </div>
  <div class="item" id="normal02">
  </div>
</div>

I'm currently learning HTML/CSS and I can't seem to find anything on the web for such a basic "template". As you can see my pink and yellow squares doesn't want to collide with the top green rectangle. It's been around 2 hours that I'm trying different techniques without resolving this issue, could anyone point me to the right direction ?

What is the best way to achieve what I'm trying to do, is float-left even the right way ?

Upvotes: 1

Views: 288

Answers (1)

Johannes
Johannes

Reputation: 67738

To solve this particular situation, add float: right to #vertical. If it has float: left, no subsequent elements are allowed left of it.

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
      <style>
         body {
         margin: 0;
         }
         .container {
         width: 100vw;
         height: 100vh;
         background-color: red;
         }
         .item {
         width: 33.33vw;
         height: 33.33vw;
         float: left;
         }
         #featured {
         background-color: green;
         width: 66.66vw;
         }
         #vertical {
           float: right;
         background-color: blue;
         height: 66.66vw;
         }
         #normal01 {
         background-color: pink;
         }
         #normal02 {
         background-color: yellow;
         }
      </style>
      <div class="container">
         <div class="item" id="featured">
         </div>
         <div class="item" id="vertical">
         </div>
         <div class="item" id="normal01">
         </div>
         <div class="item" id="normal02">
         </div>
      </div>
   </body>
</html>

Upvotes: 3

Related Questions