DEV Community

Cover image for Level-Ground: Section with CSS Floats
Matheus 🇧🇷
Matheus 🇧🇷

Posted on

Level-Ground: Section with CSS Floats

#tutorial #beginners #css #html

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

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

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
Now I can open my editor and create my HTML file, structure it, respecting the respective semantics.

Accessibility is important!

  • 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>
Enter fullscreen mode Exit fullscreen mode

And this is our HTML file.

enter image description here

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 
*  {
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;
}
Enter fullscreen mode Exit fullscreen mode

That'll be translated to it:

enter image description here

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

Explaining the values that I used 

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

html  {
font-size:  62.5%;
}
Enter fullscreen mode Exit fullscreen mode

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

.facilities  {
background-color:  rgb(209,  209,  209);
width:  100%;
height:  80vh;
border:  2px  solid  red;
}
Enter fullscreen mode Exit fullscreen mode

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.

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

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.

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

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.

.facilities--gym > *,
.facilities--visit > *{
  border:1px solid blue;
}
Enter fullscreen mode Exit fullscreen mode

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

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 
.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;
}
Enter fullscreen mode Exit fullscreen mode

And now we have this, much more pleasant. 😊

enter image description here

Explaining the values 

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

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.

.facilities--gym,
.facilities--visit {
  border: 2px solid orange;
  width: 50%;
  float: left;
  text-align: center;
  padding: 14rem 0;
}
Enter fullscreen mode Exit fullscreen mode

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 
.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;
}
Enter fullscreen mode Exit fullscreen mode

Look how fancy is it now :D

enter image description here

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 htmlfile and add our image.

<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>
Enter fullscreen mode Exit fullscreen mode

Oh god... again!?

enter image description here

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 
.facilities--gym_img img,
.facilities--visit_img img {
  width: 100%;
  height: 100%;
}
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

And now we have this.

enter image description here

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

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

Github: http://www.github.com/mpfdev

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

Top comments (0)

Read next

chipm0nk profile image

From Concept to Code: Building a Simple Endless Runner Game

Chipm0nk -

warish profile image

A Complete Guide to Build a Documentation Site with Astro Starlight

Waricha -

arindam_1729 profile image

Hiring in the Open - How Companies Can Discover Top Talent via Opire

Arindam Majumder -

shinetechsoftwareinc profile image

How to Add Competitiveness to Your Remote Development Team

Shinetech Software -