Level-Ground: Section with CSS Floats
Tags: tutorial, beginners, css, html
Published: 2022-02-14 20:45:50



# Section with CSS Floats

I know, I know, the title is a bit generalist, but most of the layouts out there follows a section like this :)

Today we're going to learn more about on how-to-do this layout.

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

My version of it: https://laughing-kilby-4ed51e.netlify.app/

This section below is my reference for what we are going to build.

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

### Let's start

Like I said at the last tutorial, I always like to draw a rough sketch from how I see the containers and their positioning.

![enter image description here](https://i.imgur.com/qpWqoWE.png)
**Now** I can open my editor and create my **HTML file,** structure it, respecting the respective **semantics**.

**Accessibility is important!**

- HTML
```html
<main>
  <!--sections...-->
  <section class="facilities">
    <article class="facilities--gym">
      <div class="facilities--gym_img">

      </div>
      <h3>VISIT THE GYM</h3>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, ullam culpa corrupti quod quaerat maxime. Recusandae, voluptatibus unde! Porro praesentium dolores, sit harum saepe quibusdam iste ipsam vero, nam temporibus assumenda, laboriosam sapiente! Aliquid sunt placeat, vel accusamus aliquam voluptatibus alias culpa iusto iure labore numquam perspiciatis iste? Quae, commodi.</p>
      <button>SEE CLASSES</button>
    </article>

    <article class="facilities--visit">
      <div class="facilities--visit_img">

      </div>
      <h3>HAVE US VISIT YOU</h3>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, ullam culpa corrupti quod quaerat maxime. Recusandae, voluptatibus unde! Porro praesentium dolores, sit harum saepe quibusdam iste ipsam vero, nam temporibus assumenda, laboriosam sapiente! Aliquid sunt placeat, vel accusamus aliquam voluptatibus alias culpa iusto iure labore numquam perspiciatis iste? Quae, commodi.</p>
      <button>HIRE US</button>
    </article>
  </section>
  <!--sections...-->
</main>
```

And this is our HTML file.

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

Now that we have our structure done, we can go to CSS to give it style. Let’s remember:

**HTML** is for Structure.
**CSS** is for Styling.

- CSS
```css
*  {
margin:  0;
padding:  0;
box-sizing:  border-box;
}

html  {
font-size:  62.5%;
}

/* FACILITIES */
.facilities  {
background-color:  rgb(209,  209,  209);
width:  100%;
height:  80vh;
border:  2px  solid  red;
}

.facilities--gym,
.facilities--visit  {
border:  2px  solid  orange;
width:  50%;
float:  left;
text-align:  center;
}  

.facilities--gym_img,
.facilities--visit_img  {
width:  20rem;
height:  10rem;
background-color: blue;
margin:  0  auto;
}

.facilities--gym > *,
.facilities--visit > *{
  border:1px solid blue;
}
```

That'll be translated to it:

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

Okay, I know, things just went too fast here, but I’m going to explain all these values.

#### Explaining the values that I used

```css
*  {
margin:  0;
padding:  0;
box-sizing:  border-box;
}

html  {
font-size:  62.5%;
}
```

These are **my reset values**, also I like to use **1rem to 10px**, so that’s why I use `font-size: 62.5%`.

```css
.facilities  {
background-color:  rgb(209,  209,  209);
width:  100%;
height:  80vh;
border:  2px  solid  red;
}
```
Here is the section, the whole parent-box that holds everything together.

From now, we know the **height of a container is their content**.
I'm using a **fixed size to improve your understanding of this tutorial**, which is **easier to see who is the parent box**. The same that I designed in my rough sketch.

```css
.facilities--gym,
.facilities--visit  {
border:  2px  solid  orange;
width:  50%;
float:  left;
text-align:  center;
} 
```
These are my articles (child-box), they are side-by-side, so that’s why I set a width of **50%** each and floated both elements to the left.

The `text-align: center` is to move all the elements inside them to the **center**. It works exactly like any text editor.

```css
.facilities--gym_img,
.facilities--visit_img  {
width:  20rem;
height:  10rem;
background-color: blue;
margin:  0  auto;
}
```

*Here, you may be thinking*. 

Why did you not apply the `img` tag directly? Why did you create a `div` for it?
**The answer**: I'll add an `img` later, but **I want a parent-box** for this `img` element, **to wrap him**. That way, **I can set the width and height**.
**Trust me**, you'll understand why.

```css
.facilities--gym > *,
.facilities--visit > *{
  border:1px solid blue;
}
```
That is purely for visuals. To improve your understanding of the boxes.

### Positioning the Child-boxes

So, we all know how border-box works, right?

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

Don't know it? **It is okay**.

I recommend this blog post here: https://zellwk.com/blog/understanding-css-box-sizing/

I'm going to change the `padding` from our child-box (orange border) to increase their size. This will affect vertically, and give a better **positioning** to our elements.

- CSS
```css
.facilities {
  background-color: rgb(209, 209, 209);
  width: 100%;
  overflow: auto;
  border: 2px solid red;
}

.facilities--gym,
.facilities--visit {
  border: 2px solid orange;
  width: 50%;
  float: left;
  text-align: center;
  padding: 14rem 0;
}
```
And now we have this, much more pleasant. 😊

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

#### Explaining the values

```css
.facilities {
  background-color: rgb(209, 209, 209);
  width: 100%;
  overflow: auto;
  border: 2px solid red;
}
```

Remember when I used a **fixed size to value the height** of the container (red border)? **Now** I want **them to change accordingly with the content of their child-box** (orange border).

For this, to be a **dynamically value**. Replace the `height` for `overflow: auto`.

```css
.facilities--gym,
.facilities--visit {
  border: 2px solid orange;
  width: 50%;
  float: left;
  text-align: center;
  padding: 14rem 0;
}
```
I added `padding` **top and bottom**. 
Now, I have that **vertically-aligned** feeling, using the **border-box** characteristics.

### Improving our article's container.

Now that our structure is complete, we can make it more similar to the original layout. Let's try it!

- CSS
```css
.facilities--gym h3,
.facilities--visit h3 {
  padding: 2rem 0;
}

.facilities--gym p,
.facilities--visit p {
  padding-bottom: 2rem;
  width: 60%;
  margin: 0 auto;
  letter-spacing: 0.06rem;
}

.facilities--gym button,
.facilities--visit button {
  border: none;
  padding: 1rem 2rem;
  outline: 1px solid black;
  color: black;
}
```

Look how fancy is it now :D

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

### Adding the IMG

Now, I can show why I created a `div` first.

Here we have two options:

- Use the `background-image: url('path');`
- Create an image element inside of it.

I'm going to use the second option, **no** preferences.

Let's return to our `html`file and add our image.

```html
<main>
  <!--sections...-->
  <section class="facilities">
    <article class="facilities--gym">
      <div class="facilities--gym_img">
		<img src="https://via.placeholder.com/500" alt="placeholde image 500x500">
      </div>
      <h3>VISIT THE GYM</h3>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, ullam culpa corrupti quod quaerat maxime. Recusandae, voluptatibus unde! Porro praesentium dolores, sit harum saepe quibusdam iste ipsam vero, nam temporibus assumenda, laboriosam sapiente! Aliquid sunt placeat, vel accusamus aliquam voluptatibus alias culpa iusto iure labore numquam perspiciatis iste? Quae, commodi.</p>
      <button>SEE CLASSES</button>
    </article>

    <article class="facilities--visit">
      <div class="facilities--visit_img">

      </div>
      <h3>HAVE US VISIT YOU</h3>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, ullam culpa corrupti quod quaerat maxime. Recusandae, voluptatibus unde! Porro praesentium dolores, sit harum saepe quibusdam iste ipsam vero, nam temporibus assumenda, laboriosam sapiente! Aliquid sunt placeat, vel accusamus aliquam voluptatibus alias culpa iusto iure labore numquam perspiciatis iste? Quae, commodi.</p>
      <button>HIRE US</button>
    </article>
  </section>
  <!--sections...-->
</main>
```

Oh god... again!?

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

#### Fixing it.

In the last tutorial, we learned something new. **Our images have their own values for width and height**. We **must contain it inside into his parent-box** (the `div` we created before, remember?) 😆

- CSS
```css
.facilities--gym_img img,
.facilities--visit_img img {
  width: 100%;
  height: 100%;
}
```

- HTML
```html
<main>
  <!--sections...-->
  <section class="facilities">
    <article class="facilities--gym">
      <div class="facilities--gym_img">
        <img src="https://via.placeholder.com/500" alt="placeholde image 500x500">
      </div>
      <h3>VISIT THE GYM</h3>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, ullam culpa corrupti quod quaerat maxime. Recusandae, voluptatibus unde! Porro praesentium dolores, sit harum saepe quibusdam iste ipsam vero, nam temporibus assumenda, laboriosam sapiente! Aliquid sunt placeat, vel accusamus aliquam voluptatibus alias culpa iusto iure labore numquam perspiciatis iste? Quae, commodi.</p>
      <button>SEE CLASSES</button>
    </article>

    <article class="facilities--visit">
      <div class="facilities--visit_img">
        <img src="https://via.placeholder.com/500" alt="placeholde image 500x500">
      </div>
      <h3>VISIT THE GYM</h3>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, ullam culpa corrupti quod quaerat maxime. Recusandae, voluptatibus unde! Porro praesentium dolores, sit harum saepe quibusdam iste ipsam vero, nam temporibus assumenda, laboriosam sapiente! Aliquid sunt placeat, vel accusamus aliquam voluptatibus alias culpa iusto iure labore numquam perspiciatis iste? Quae, commodi.</p>
      <button>SEE CLASSES</button>
    </article>
  </section>
  <!--sections...-->
</main>
```

And now we have this.

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


Is it much better, right?

Now, we'll remove all the borders. 
I'm going to take some freedom here to change:
- The `background-color`;
- **Increase the width and height** from the `div's image`.

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

Codepen: https://codepen.io/mpfdev/full/podPmwQ

It's all **vomit-code**, and now you can go forward for the next sections of the layout.

Later you return and improve it, make it better.

**You can do it!** 👍👍

Is this the only way to do it?
**No.** Everyone does in their own way, **there is no right or wrong**.

I hope this tutorial can improve your understanding of CSS Floats and a bit of my process of building new layouts.

Don't forget to follow me on my social media:

Twitter: [http://www.twitter.com/mpfdev](http://www.twitter.com/mpfdev)

Github: [http://www.github.com/mpfdev](http://www.github.com/mpfdev)

  

My last tutorial, you can follow here: [https://dev.to/mpfdev/lookbook-with-css-floats-673](https://dev.to/mpfdev/lookbook-with-css-floats-673)