Dark code

 HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP BOOTSTRAP HOW TO W3.CSS C C++ C# REACT R   
 Tutorials 
CSS Pseudo-class
References  Exercises  Bootcamp Upgrade Get Certified Create Website Sign Up Log in

CSS Pseudo-element
CSS Opacity
CSS Navigation Bar
CSS Dropdowns
CSS Image Gallery
CSS Image Sprites
CSS Attr Selectors
CSS Forms
CSS Counters
CSS Website Layout
CSS Website Layout
❮ Previous Next ❯
CSS Units
CSS Specificity
CSS !important
CSS Math Functions Website Layout
CSS Advanced A website is often divided into headers, menus, content and a footer:
CSS Rounded Corners COLOR PICKER
CSS Border Images
CSS Backgrounds Header
CSS Colors
CSS Color Keywords
CSS Gradients Navigation Menu
CSS Shadows 
CSS Text Effects
CSS Web Fonts
f Get certified
by completing
Content Main Content Content a CSS
course today!

school
w3 s

3
CE

02
TI 2
Footer

R
FI .
ED

There are tons of different layout designs to choose from. However, the structure above, is one of the most common, and we will Get started
take a closer look at it in this tutorial.

Header
A header is usually located at the top of the website (or right below a top navigation menu). It often contains a logo or the
website name:

Example

.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}

Result

Header

Try it Yourself »

Navigation Bar
A navigation bar contains a list of links to help visitors navigating through your website:

Example

/* The navbar container */

.topnav {
overflow: hidden;
background-color: #333;
}

/* Navbar links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Links - change color on hover */

.topnav a:hover {
background-color: #ddd;
color: black;
}

Result

Link Link Link

Try it Yourself »

Content
The layout in this section, often depends on the target users. The most common layout is one (or combining them) of the
following:

1-column (often used for mobile browsers)

2-column (often used for tablets and laptops)
3-column layout (only used for desktops)

1-column: 2-column: 3-column:

We will create a 3-column layout, and change it to a 1-column layout on smaller screens:

Example

/* Create three equal columns that float next to each other */

.column {
float: left;
width: 33.33%;
}

/* Clear floats after the columns */

.row:after {
content: "";
display: table;
clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller
screens (600px wide or less) */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}

Result

Column Column Column

Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Maecenas consectetur adipiscing elit. Maecenas consectetur adipiscing elit. Maecenas
sit amet pretium urna. Vivamus sit amet pretium urna. Vivamus sit amet pretium urna. Vivamus
venenatis velit nec neque ultricies, venenatis velit nec neque ultricies, venenatis velit nec neque ultricies,
eget elementum magna tristique. eget elementum magna tristique. eget elementum magna tristique.

Try it Yourself »

Tip: To create a 2-column layout, change the width to 50%. To create a 4-column layout, use 25%, etc.

Tip: Do you wonder how the @media rule works? Read more about it in our CSS Media Queries chapter.

Tip: A more modern way of creating column layouts, is to use CSS Flexbox. However, it is not supported in Internet Explorer 10
and earlier versions. If you require IE6-10 support, use floats (as shown above).

To learn more about the Flexible Box Layout Module, read our CSS Flexbox chapter.

Unequal Columns
The main content is the biggest and the most important part of your site.

It is common with unequal column widths, so that most of the space is reserved for the main content. The side content (if any)
is often used as an alternative navigation or to specify information relevant to the main content. Change the widths as you like,
only remember that it should add up to 100% in total:

Example

.column {
float: left;
}

/* Left and right column */

.column.side {
width: 25%;
}

/* Middle column */
.column.middle {
width: 50%;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}

Result

Side Main Content Side

Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit
amet, consectetur Maecenas sit amet pretium urna. Vivamus venenatis velit amet, consectetur
adipiscing elit... nec neque ultricies, eget elementum magna tristique. adipiscing elit...
Quisque vehicula, risus eget aliquam placerat, purus leo
tincidunt eros, eget luctus quam orci in velit. Praesent
scelerisque tortor sed accumsan convallis.

Try it Yourself »

Footer
The footer is placed at the bottom of your page. It often contains information like copyright and contact info:

Example

.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}

Result

Footer

Try it Yourself »

Responsive Website Layout

By using some of the CSS code above, we have created a responsive website layout, which varies between two columns and full-
width columns depending on screen width:

Try it Yourself »

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

❮ Previous Log in to track progress Next ❯

Report Error Spaces Upgrade Newsletter Get Certified

Top Tutorials Top References Top Examples Get Certified

HTML Tutorial HTML Reference HTML Examples HTML Certificate
CSS Tutorial CSS Reference CSS Examples CSS Certificate
JavaScript Tutorial JavaScript Reference JavaScript Examples JavaScript Certificate
How To Tutorial SQL Reference How To Examples Front End Certificate
SQL Tutorial Python Reference SQL Examples SQL Certificate
Python Tutorial W3.CSS Reference Python Examples Python Certificate
W3.CSS Tutorial Bootstrap Reference W3.CSS Examples PHP Certificate
Bootstrap Tutorial PHP Reference Bootstrap Examples jQuery Certificate
PHP Tutorial HTML Colors PHP Examples Java Certificate
Java Tutorial Java Reference Java Examples C++ Certificate
C++ Tutorial Angular Reference XML Examples C# Certificate
jQuery Tutorial jQuery Reference jQuery Examples XML Certificate

FORUM | ABOUT

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 warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2023 by Refsnes Data. All Rights Reserved.

W3Schools is Powered by W3.CSS.