CSS Layout - Overview

   
   
 css  
 frontend  
Article Series

This article series contain few sections.

Where to Discuss?

Local Group

Table of Content

Preface

In case you haven’t notice, CSS provide many method to create page layout.

Goal: Create Basic Layout with Pure CSS.

Without CSS Framework?

The last time I design layout with pure CSS might be in year of 2010. After that I use Bootstrap CSS Framework, and this year I step to Bulma. Time has passes by, now we have HTML5 semantic tags. As we have CSS3, it has been a pleasure, to see how the CSS standard has become. But I never really have time to learn this pure CSS.

Until now!

Method Provided

CSS layout with pure CSS has changed from time to time. Here I represent four example layouts. From the latest and easiest to the ancient one.

  • Flex

  • Grid

  • Float with Calc

  • Fake Table

Of course there are other method as I can recall. This include float with positioning. But I do not think that I have time to ressurect my old works.

I’m mostly posting codes so I won’t have any problems finding it in the future.

Table of Content

The table content is available as header on each tutorial. There, I present a Hugo Tutorial, step by step, for beginners.

Source Code

You can download the source code of this article series here.

1: Prepare Document and Stylesheet

Before dive into each CSS method, consider this simple hello world page.

First thing first.

Each example has three equal steps

  • 1: Prepare Document and Stylesheet

  • 2: Equal Column Height

  • 3: Page Layout with Sticky Footer

The first step provided here, as a basic required knowledge, before you continue step into the rest (the other two steps).

Document

<html>
<head>
  <title>Prepare</title>
  <link rel="stylesheet" type="text/css" href="01-common.css">
</head>
<body>
  <div class="container">

    <p>Hello world!</p>

    <p>lorem ipsum<br/>lorem ipsum<br/>lorem ipsum<br/>
    lorem ipsum<br/>lorem ipsum<br/>lorem ipsum</p>

  </div>
</body>
</html>

Stylesheet

Nothing fancy here. Just reset, and colors.

body, html {
  height: 100%;
  padding: 0;
  margin: 0;

  background-color: white;
}

.container {
  background-color: white;
  border: 2px dashed #0d47a1;

  padding-left: 1rem;
  padding-right: 1rem;
}

Browser Preview

Consider have a look at the result in your favorite browser

CSS: Simple Page

Pretty easy right?

Begin The Guidance

Let’s get the method example started.

We are going to use flex layout, before reader experience the difference, with other layout. Consider continue reading [ CSS Layout - Flex ].

And yeah… Thank you for reading.