In this video, we're going to explore the float property to properly align elements.

As always, create a new <div> tag in your HTML file, and give it an ID titled blocks. Inside this, create three block elements.

<div id='blocks'>
  <div class='block'></div>
  <div class='block'></div>
  <div class='block'></div>
  <div class='block'></div>
  <div class='block'></div>
</div>

Next, open styles.css and we'll start defining the attribute for #blocks. We will return to the elements inside each <div> tag later.

First off, set the position attribute with the value absolute to ensure that our elements are below the pricing tables.

Now, we'll work on the block class. Starting with height and width, give a value of 140px and 250px respectively. Then, we'll give our red as the background color.

#blocks {
  position: absolute;
}

.block {
  height: 140px;
  width: 250px;
  background-color: #ab3939;
}

This gives a block like so:

Our block is more than 140px because all three blocks are vertically stacked, however we are going to put them adjacent to each other on a horizontal plane.

To get the appearance of three small rectangular blocks, add a margin of 20px. To place it on the side, we're going to use a property called float, like so:

float: left; 

Essentially, this code ensures that every element floats to the left of the previous element. It also gives us some dynamic behavior. If we were to add two more <div> tags, those would also be placed to the left of the previous ones.

We're not utilizing the flex-wrap code used earlier for our pricing-tables because we don't want a fixed position. If you expand the browser, the blocks that we created will move to the side, like this:

So, if you want elements to be centered and in a fixed position, it's best to use flex-wrap. On the other hand, if these factors are not of concern you can use this float property.