5/8/25, 9:56 AM HTML Layout Elements and Techniques
Tutorials Exercises Services Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
HTML Layout Elements and
Techniques
❮ Previous Next ❯
Websites often display content in multiple columns (like a magazine or a
newspaper).
Example
Cities
London
London
Paris
Tokyo
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.
https://www.w3schools.com/Html/html_layout.asp 1/8
5/8/25, 9:56 AM HTML Layout Elements and Techniques
Standing on the River Thames, London has been a major
Tutorials Exercises
settlementServices
for two millennia, going back to Sign
its history Up
its founding Log in
by the Romans, who named it Londinium.
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
Footer
Try it Yourself »
HTML Layout Elements
HTML has several semantic elements that define the different parts of a web page:
<header> - Defines a header for a document or a
section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines independent, self-contained
content
<aside> - Defines content aside from the content
(like a sidebar)
<footer> - Defines a footer for a document or a
section
<details> - Defines additional details that the user
can open and close on demand
<summary> - Defines a heading for the <details>
element
You can read more about semantic elements in our HTML
Semantics chapter.
HTML Layout Techniques
There are four different techniques to create multicolumn layouts. Each technique has its
pros and cons:
https://www.w3schools.com/Html/html_layout.asp 2/8
5/8/25, 9:56 AM HTML Layout Elements and Techniques
CSS framework
Tutorials
CSS Exercises
float property Services Sign Up Log in
CSS flexbox
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
CSS grid
CSS Frameworks
If you want to create your layout fast, you can use a CSS framework, like W3.CSS or
Bootstrap.
Ever heard about W3Schools Spaces? Here you can create your website from scratch
or use a template, and host it for free.
Get started for free ❯
* no credit card required
CSS Float Layout
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.
Example
Cities
https://www.w3schools.com/Html/html_layout.asp 3/8
5/8/25, 9:56 AM HTML Layout Elements and Techniques
Tutorials Exercises Services Sign Up Log in
London
London
HTML
Paris
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
Tokyo
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.
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.
Footer
Try it Yourself »
CSS Flexbox Layout
Use of flexbox ensures that elements behave predictably when the page layout must
accommodate different screen sizes and different display devices.
Learn more about flexbox in our CSS Flexbox chapter.
Example
Cities
https://www.w3schools.com/Html/html_layout.asp 4/8
5/8/25, 9:56 AM HTML Layout Elements and Techniques
Tutorials Exercises Services Sign Up Log in
HTML
Paris
CSS
London
JAVASCRIPT
London
SQL PYTHON JAVA PHP HOW TO W3.CSS C
Tokyo
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.
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.
Footer
Try it Yourself »
CSS Grid Layout
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.
Learn more about CSS grids in our CSS Grid Intro chapter.
❮ Previous Next ❯
Track your progress - it's free! Sign Up Log in
https://www.w3schools.com/Html/html_layout.asp 5/8
5/8/25, 9:56 AM HTML Layout Elements and Techniques
Tutorials Exercises Services Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
COLOR PICKER
PLUS SPACES
GET CERTIFIED FOR TEACHERS
https://www.w3schools.com/Html/html_layout.asp 6/8
5/8/25, 9:56 AM HTML Layout Elements and Techniques
Tutorials Exercises
FOR BUSINESS
Services
CONTACT US
Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial
Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
Top Examples Get Certified
HTML Examples HTML Certificate
CSS Examples CSS Certificate
JavaScript Examples JavaScript Certificate
How To Examples Front End Certificate
SQL Examples SQL Certificate
Python Examples Python Certificate
W3.CSS Examples PHP Certificate
Bootstrap Examples jQuery Certificate
PHP Examples Java Certificate
Java Examples C++ Certificate
XML Examples C# Certificate
jQuery Examples XML Certificate
FORUM ABOUT ACADEMY
W3Schools is optimized for learning and training. Examples might be simplified to improve
reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot
https://www.w3schools.com/Html/html_layout.asp 7/8
5/8/25, 9:56 AM HTML Layout Elements and Techniques
warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of use,
Tutorials Exercises Services
cookie and privacy policy.
Sign Up Log in
HTML
Copyright
CSS 1999-2025 by Refsnes
JAVASCRIPT SQLData. PYTHON
All Rights Reserved.
JAVA W3Schools
PHP is Powered
HOW TOby W3.CSS.
W3.CSS C
https://www.w3schools.com/Html/html_layout.asp 8/8
