HTML Layouts

HTML Layout Elements

Websites often display content in multiple columns (like a magazine or newspaper).

HTML5 offers new semantic elements that define the different parts of a web page :

<header> - Defines a header for a document or a section
<nav> - Defines a container for navigation links
<section> - Defines a section in a document
<article> - Defines an independent self-contained article
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details
<summary> - Defines a heading for the <details> element

HTML Layout Techniques

There are four different ways to create multi column layouts. Each way has its pros and cons :

HTML tables
CSS float property
CSS framework
CSS flexbox

Which One to Choose ?

HTML Tables

The <table> element was not designed to be a layout tool! The purpose of the <table> element is to display tabular data. So, do not use tables for your page layout ! They will bring a mess into your code. And imagine how hard it will be to redesign your site after a couple of months.

Tip : Do NOT use tables for your page layout !

CSS Frameworks

If you want to create your layout fast, you can use a framework, like W3.CSS or Bootstrap.

CSS Floats

It is common to do 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. Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility. Learn more about float in our CSS Float and Clear chapter.

Float Example

<!DOCTYPE html>
<html>
<head>
<style>
div.container {
    width: 100%;
    border: 1px solid gray;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: #931919;
    clear: left;
    text-align: center;
}

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}

nav ul {
    list-style-type: none;
    padding: 0;
}
   
nav ul a {
    text-decoration: none;
}

article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}
</style>
</head>
<body>

<div class="container">

<header>
   <h2><b>Welcome to W3Professors.com</b></h2>
</header>
  
<nav>
  <ul>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">PHP</a></li>
    <li><a href="#">JS</a></li>
    <li><a href="#">JQ</a></li>
  </ul>
</nav>

<article>
  <h2>W3Professors</h2>
  <p>W3Professors is a group of Professors, Doctorates & Professionals having one motive to provide free online education to all.</p> 
  <p>W3Professors is famous web site having mission to provide free online education to all. We have Tutorials, Programs, Presentations and Articles in easy format. </p>
</article>

<footer>Copyright © W3Professors.com</footer>

</div>

</body>
</html>

Float Example

CSS Flexbox

Flexbox is a new layout mode in CSS3.

Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices. Disadvantages: Does not work in IE10 and earlier.

Flexbox Example

<!DOCTYPE html>
<html>
<head>
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    text-align: center;
}

.flex-container > * {
    padding: 15px;
    -webkit-flex: 1 100%;
    flex: 1 100%;
}

.article {
    text-align: left;
}

header {background: #aaa;color:white;}
footer {background: #aaa;color:white;}
.nav {background:#eee;}

.nav ul {
    list-style-type: none;
    padding: 0;
}
.nav ul a {
    text-decoration: none;
}

@media all and (min-width: 768px) {
    .nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
    .article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
    footer {-webkit-order:3;order:3;}
}
</style>
</head>
<body>

<div class="flex-container">
<header>
  <h1>Top Courses</h1>
</header>

<nav class="nav">
  <ul>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">PHP</a></li>
    <li><a href="#">JS</a></li>
    <li><a href="#">JQ</a></li>
  </ul>
</nav>

<article class="article">
  <h2>W3Professors</h2>
  <p>W3Professors is a group of Professors, Doctorates & Professionals having one motive to provide free online education to all.</p> 
  <p>W3Professors is famous web site having mission to provide free online education to all. We have Tutorials, Programs, Presentations and Articles in easy format. </p>
  <p><strong>Resize this page to see that what happens!</strong></p>
</article>

<footer>Copyright © W3Professors.com</footer>
</div>

</body>
</html>

Flexbox Example