Lookbook with CSS Floats
Tags: tutorial, beginners, css
Published: 2022-02-11 21:06:56

## 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.
![enter image description here](https://i.imgur.com/7fIlfcq.jpg)
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).

![enter image description here](https://i.imgur.com/K83Y1Sn.png)

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

  

 - HTML

```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>

```
- CSS

 ```css
.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:

![enter image description here](https://i.imgur.com/5WbK4x0.png)
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.

```css
.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`.

```css
.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

```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>
```

- CSS

```css
.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

![enter image description here](https://i.imgur.com/WfJIdf0.png)
#### Explaining the new values that I used.

```css
.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
```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>
```


![enter image description here](https://i.imgur.com/weM0OWi.png)
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`.
- CSS
```css
img {
  width: 100%;
  height: 100%;
}
```

### Images fixed

- HTML
```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>
```

- CSS

```css
.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%;
}
```

![enter image description here](https://i.imgur.com/blQTWdu.png)
Now we can remove ours `borders`.

And here is our Lookbook done using CSS Floats.

![enter image description here](https://i.imgur.com/cSRdmQq.png)
## 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.

## My socials

If you have any questions and/or are in the 100Devs bootcamp, follow me:

Twitter: https://twitter.com/mpfdev
Github: https://github.com/mpfdev