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.
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