What is this css tutorial using to make rows and columns?

It’s about 3 column layout:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

.left, .right {
  width: 25%;
}

.middle {
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<h2>Three Unequal Columns</h2>

<div class="row">
  <div class="column left" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column middle" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column right" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
</div>

</body>
</html>

It just declares rows and columns, what is it using? Flexbox?

Hi @levilone!

It is using floats and clears. In my opinion I like flexbox or grid better than floats and clears.

1 Like

float

This was the primary technique for making grid layouts in CSS before flexbox/grid. You don’t need to use it, it’s a hack (those two APIs didn’t exist for a long time)

2 Likes

Ah, I’ll have to find a more modern tutorial, thank you both

W3 schools has some really cool tutorials in general but sometimes they still use floats and clears which is really confusing for beginners. I personally didn’t like floats and clears so I am glad for the newer techniques.

Also, FCC has sections on Flexbox and grid so you will learn how to do this grid layout.

Yes, I have the html & css certification, I just find this a little challenging and decided to use a tutorial for the first one. I’ll just look up a flexbox-based tutorial.

2 Likes

You might also be interested in css tricks

1 Like

Thank you very muc, I’ll probably end up reading a lot of their articles.