HTML Layout Elements and Techniques
Websites often show content in multiple columns, like a magazine or newspaper.
HTML Layout Elements
HTML has several semantic elements that mark out the parts of a page: <header> (a header for a document or section), <nav> (a set of navigation links), <section> (a section), <article> (independent, self-contained content), <aside> (content to the side, like a sidebar), <footer> (a footer), <details> (extra details the user can open and close), and <summary> (a heading for the <details>). You can read more in the HTML Semantics chapter.
HTML Layout Techniques
There are four common ways to make multi-column layouts, each with pros and cons: CSS frameworks, the CSS float property, CSS flexbox, and CSS grid.
CSS Frameworks
To build a layout quickly, you can use a CSS framework like Bootstrap.
CSS Float Layout
You can build whole layouts with the CSS float property. Float is easy to learn; you just need to know how float and clear work. Disadvantage: floated elements are tied to the document flow, which can reduce flexibility.
Example
A multi-column layout built with float.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
.nav {
float: left;
width: 30%;
background: #ccc;
padding: 20px;
}
.main {
float: left;
width: 70%;
padding: 20px;
}
.footer {
clear: both;
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>Cities</h1>
</div>
<div class="nav">
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</div>
<div class="main">
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
CSS Flexbox Layout
Flexbox makes elements behave predictably when the layout has to fit different screen sizes and devices.
Example
The same layout built with flexbox.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
.row {
display: flex;
}
.nav {
flex: 30%;
background: #ccc;
padding: 20px;
}
.main {
flex: 70%;
padding: 20px;
}
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>Cities</h1>
</div>
<div class="row">
<div class="nav">
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</div>
<div class="main">
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
CSS Grid Layout
The CSS Grid layout module gives a grid-based system of rows and columns, making it easier to design pages without floats or positioning. You can learn more in the CSS Grid chapter.