CSS Website Layout

Website Layout

Websites are usually divided into header, menu, content, and footer:

There are many different layout designs to choose from. However, the above structure is one of the most common structures, and we will study it in detail in this tutorial.

Header

The header (header) is usually located at the top of the website (or just below the top navigation menu). It usually contains a logo or the name of the website:

Example

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

Result:

Header

Try It Yourself

Navigation Bar

The navigation bar contains a list of links to help visitors browse your website:

Example

/* Navbar container */
.topnav {
  overflow: hidden;
  background-color: #333;
}
/* Navbar link */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Link - Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

Result:

Try It Yourself

Content

The choice of layout usually depends on your target users. The most common layouts are one of the following (or a combination of them):

  • 1-columnLayout (usually used for mobile browsers)
  • 2-columnsLayout (usually used for tablets and laptops)
  • 3-columnsLayout (used only for desktops)

1-column:

2-columns:

3-columns:

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 float after columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Responsive layout - Stack three columns instead of side by side on smaller screens (width of 600 pixels or less) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Result:

Complete website technology reference manual

Our reference manual covers all aspects of website technology.

This includes W3C standard technologies: HTML, CSS, XML, and other technologies such as JavaScript, PHP, SQL, etc.

Online instance test tool

At CodeW3C.com, we provide thousands of examples.

By using our online editor, you can edit these examples and experiment with the code.

Quick and Easy Learning Method

Time is money, so we provide you with quick and easy-to-understand learning content.

Here, you can obtain any knowledge you need in an easy-to-understand and convenient way.

Try It Yourself

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

Tip:Do you want to know how the @media rule works? Please read our CSS Media Queries Learn more about related knowledge in this chapter.

Tip:A more modern way to create column layouts is to use CSS Flexbox. However, Internet Explorer 10 and earlier versions do not support it. If IE6-10 support is required, use floats (as shown above).

For more information about the Flexible Box layout module, please read our CSS Flexbox Tutorial.

Unequal columns

Main content (main content) is the largest and most important part of your website.

Columns of unequal width are common, as most of the space is reserved for the main content. Auxiliary content (if any) is usually used as alternative navigation or to specify information related to the main content. You can change the width at will, just remember that its total should be 100%:

Example

.column {
  float: left;
}
/* Left and right columns */
.column.side {
  width: 25%;
}
/* Middle column */
.column.middle {
  width: 50%;
}
/* Responsive layout - Stack three columns instead of side by side */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Result:

Complete website technology reference manual

Our reference manual covers all aspects of website technology.

This includes W3C standard technologies: HTML, CSS, XML, and other technologies such as JavaScript, PHP, SQL, etc.

Online instance test tool

At CodeW3C.com, we provide thousands of examples.

By using our online editor, you can edit these examples and experiment with the code.

Quick and Easy Learning Method

Time is money, so we provide you with quick and easy-to-understand learning content.

Here, you can obtain any knowledge you need in an easy-to-understand and convenient way.

Try It Yourself

Footer

The footer is located at the bottom of the page. It usually contains information such as copyright and contact details:

Example

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

Result:

Footer

Try It Yourself

Responsive Website Layout

By using the above CSS code, we have created an adaptive website layout that switches between two columns and full-width columns based on screen width:

Try It Yourself