HTML Layout

HTML offers several semantic layout elements that define the different parts of a web page.

Here is an example layout with semantic elements.

There are 5 ways to create multicolumn layouts. Each has its pros and cons.

• HTML tables
• CSS flexbox
• CSS grid
• CSS float property
• CSS framework

We'll look at each one.

Tables are designed to display tabular data and not to create HTML layouts. It is easy to create a layout with the <table> element, but it not a good choice for responsive pages, because they don't easily reconfigure with different browser sizes. Therefore, tables should not be used as a layout technique.

A table layout.

<style>
  table.tb { border-collapse: collapse; width: 100%; }
  .tb th, .tb td { padding: 10px; border: 10px solid steelblue; }
  .tb th { background-color: aliceblue;}
</style>

<table class="tb">
  <tr>
    <th>First name</th>
    <th>Last name</th>
    <th>City</th>
    <th>State/Zip</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Denice</td>
    <td>Hobermann</td>
    <td>Houston</td>
    <td>TX 77007</td>
    <td>USA</td>
  </tr>
  <tr>
    <td>Paulo</td>
    <td>Cornell</td>
    <td>Dallas</td>
    <td>TX 75002</td>
    <td>USA</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Hollander</td>
    <td>San Antonio</td>
    <td>TX 78006</td>
    <td>USA</td>
  </tr>
</table>

To learn more about tables, see our HTML tables reference.

Flexbox is a layout mode introduced in CSS3. Use of flexbox ensures that elements behave predictably when the page has to accommodate different screen sizes and different display devices. Because of this, flexbox is a good choice for layout components, rather than entire page layouts.

A flexbox layout.

<style>
  .flexbox {
    background-color: steelblue;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
  }

  .flexbox > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    width: 100px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
    flex: auto;
  }
</style>

<div class="flexbox">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
</div>

To learn more about flexbox, see our CSS flexbox reference.

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. Grid is not supported by IE or Edge 15 and earlier. Other than that, Grid is a solid choice for creating page layouts.

A grid layout.

<style>
  .grid-layout {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-areas:
      'header header header header header header'
      'menu main main main right right'
      'menu footer footer footer footer footer';
  }

  .grid-layout > div {
    background-color: aliceblue;
    padding: 20px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="grid-layout">
  <div style="grid-area: header">Header</div>
  <div style="grid-area: menu">Menu</div>
  <div style="grid-area: main; height: 100px;">Main</div>
  <div style="grid-area: right">Right</div>
  <div style="grid-area: footer">Footer</div>
</div>

To learn more about grid, see our CSS grid reference.

Until recently it was common to create entire web layouts using the CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work. The disadvantage is that floating elements are tied to the document flow, which makes it less flexible. Today there are better alternatives when building new websites.

A float layout.

Water Lilies and Japanese Bridge represents two of Monet’s greatest achievements: his gardens at Giverny and the paintings they inspired. Monet moved to Giverny in 1883 and immediately began to develop the property. For him, the gardens were both a passion and a second artistic medium.

His Asian garden was not part of the original estate; it was located on an adjacent property with a small brook, which he purchased and enlarged into a pond for a water garden in 1893. He transformed the site into an inspired vision of cool greens and calm, reflective waters, enhanced by exotic plants such as bamboo, ginkgo, and Japanese fruit trees and a Japanese footbridge. It was not until 1899, however, that he began a series of views of the site, of which this is one.

<div>
  <img style="float:right;margin: 7px 10px 10px 15px; border: 10px solid lightblue;"
       src="/img/css/lillies-and-bridge-sm.jpg" />
  Water Lilies and Japanese Bridge represents two of Monet’s greatest
  achievements: his gardens at Giverny and the paintings they inspired.
  Monet moved to Giverny in 1883 and immediately began to develop the
  property. For him, the gardens were both a passion and a second
  artistic medium. <br /><br />

  His Asian garden was not part of the original estate; it was
  located on an adjacent property with a small brook,
  which he purchased and enlarged into a pond for a water garden
  in 1893. He transformed the site into an inspired vision
  of cool greens and calm, reflective waters, enhanced by exotic
  plants such as bamboo, ginkgo, and Japanese fruit trees and a
  Japanese footbridge. It was not until 1899, however, that he
  began a series of views of the site, of which this is one.
</div>  

To learn more about floats, see our CSS float property reference.

To create a layout fast you can use any of the popular CSS frameworks, such as, Bootstrap, Tailwind CSS, Foundation, and Bulma. These frameworks have their own set of CSS styling and pre-defined classes. They can be a great choice.

<div id="mydiv">

  <button onclick="clone();">Clone template</button>

  <template>
    <div>This is the cloned template.</div>
  </template>

</div>

<script>

   let clone = () => {

     let template = document.getElementsByTagName("template")[0];
     let clone = template.content.cloneNode(true);

     let div = document.getElementById("mydiv");
     div.appendChild(clone);
   };

</script>

• Our HTML table Tag Reference
• Our CSS flex Property Reference
• Our CSS grid Property Reference