Matheus 🇧🇷

Posted on Feb 11, 2022

Lookbook with CSS Floats

#tutorial #beginners #css

About

Even though we don't use Floats on our daily lives.
Learning float gives you a deep understanding about boxes, and their behaviour in the normal-flow of the page.

Let's start!

This post is about the lookbook's section of this layout.

First of at all, when I see an image I try to draw in a piece of paper, to imagine where are the containers, how they are organized and who is wrapping who.

Structure with Boxes

Here, I have one section (parent-container) wrapping six boxes (child-containers).

This is my rough sketch, that can be translated to it

HTML

<section  class="lookbook">
    <div  class="box"></div>
    <div  class="box"></div>
    <div  class="box"></div>
    <div  class="box"></div>
    <div  class="box"></div>
    <div  class="box"></div>
</section>

.lookbook  {
width:  100%;
height:  80vh;
border:  1px  solid  black;
} 

.box  {
border:  1px  solid  red;
float:  left;
width:  30%;
height:  30vh;
margin:  10px;
}

Which will translate to this:

Disclaimer:

Since it is purely for tutorial's purposes, I'm using div elements because there is no semantic value in this tutorial. When you create your website, accessibility is important, use sections, articles.

Explaining the values that I used so far.

.lookbook {
  width: 100%;
  height: 80vh;
  border: 1px solid black;
}

The height of our containers is always their content. So, I need to give value so my section have a height. Here you can use it as 100vh(viewport height) to be your whole screen, but I'm using as 80, so we can see the whole box.
Is this the only way? No. You can substitute height: 80vh for overflow: auto.

.box {
  float: left;
  width: 30%;
  height: 100px;
  background: black;
  margin: 0.5%;
}

I'm floating all the boxes to the left, and since I'm saying each box has a width of 30%, when the values goes beyond 100%, the next box goes to the next row. So, I'll always have 3 box per row.
I'm margin each box in all sides to have this gap-feeling between the boxes.

Expanding the Boxes

Since we know that CSS has Cascading and works top to bottom, we're going to take advantage of that, and create new classes to each div.
That way I can overwrite the respective height of each box, already defined before in box's class.

HTML

<section class="lookbook">
  <div class="box one"></div>
  <div class="box two"></div>
  <div class="box three"></div>
  <div class="box four"></div>
  <div class="box five"></div>
  <div class="box six"></div>
</section>

.lookbook {
  width: 100%;
  height: 80vh;
  border: 1px solid black;
}

.box {
  border: 1px solid red;
  float: left;
  width: 30%;
  height: 30vh;
  margin: 10px;
}

.one {
  height: 25vh;
}

.two {
  height: 50vh;
}

.three {
  height: 25vh;
}

.four {
  clear: both;
  height: 50vh;
  margin-top: -24vh;
}

.five {
  height: 25vh;
}

.six {
  height: 50vh;
  margin-top: -24vh;
}

And the result will be like this

Explaining the new values that I used.

.four {
  clear: both;
  height: 50vh;
  margin-top: -24vh;
}

I think this class is the trickiest one, since I cleared to return the page to the normal-state of flow. This is my way to keep everything in touch using CSS Float.

Since I have all the widths already fixed in the box's class. I used the Cascading effect to overwrite the height of each box. And I used margin-top to pull up the elements and align then inside my section's container.

The problem with Images

Now you have your structure and decided to use images inside your boxes, but this happened

HTML

<section class="lookbook">
  <div class="box one">
    <img src="https://via.placeholder.com/500" />
  </div>
  <div class="box two"></div>
  <div class="box three"></div>
  <div class="box four"></div>
  <div class="box five"></div>
  <div class="box six"></div>
</section>

This is totally fine, the image have it's own width and height, since we have our boxes already defined, we have to tell to the image to behave well inside their parent-element.

How do we do this? CSS is the answer.

Adding this to your img element in your css.

img {
  width: 100%;
  height: 100%;
}

Images fixed

HTML

<section class="lookbook">
  <div class="box one">
    <img src="https://via.placeholder.com/500" />
  </div>
  <div class="box two"><img src="https://via.placeholder.com/500" /></div>
  <div class="box three"><img src="https://via.placeholder.com/500" /></div>
  <div class="box four"><img src="https://via.placeholder.com/500" /></div>
  <div class="box five"><img src="https://via.placeholder.com/500" /></div>
  <div class="box six"><img src="https://via.placeholder.com/500" /></div>
</section>

.lookbook {
  width: 100%;
  height: 80vh;
  border: 1px solid black;
}

.box {
  border: 1px solid red;
  float: left;
  width: 30%;
  height: 30vh;
  margin: 10px;
}

.one {
  height: 25vh;
}

.two {
  height: 50vh;
}

.three {
  height: 25vh;
}

.four {
  clear: both;
  height: 50vh;
  margin-top: -24vh;
}

.five {
  height: 25vh;
}

.six {
  height: 50vh;
  margin-top: -24vh;
}

img {
  width: 100%;
  height: 100%;
}

Now we can remove ours borders.

And here is our Lookbook done using CSS Floats.

For the future

I have the intention to do the a new post about how to do this same lookbook using CSS Grid.
I hope this tutorial can help you to understand more about CSS Floats.