CSS Website Layout

A website is often divided into headers, menus, content and a footer:

Header

Navigation Menu

Main Content

Footer

There are tons of different layout designs to choose from. However, the structure above, is one of the most common, and we will 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:

Website Logo

In this tutorial, you will learn how to add an image to your website and also how to turn it into a link to another page using HTML. Every modern website should have images in it as it makes the website much more attractive.

Example -

<a href="https://pustudy.com"><img id="logo" src="https://pustudy.com/img/logo.jpg" width="240" height="60" alt=""></a>

Run Example

Navigation Bar

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

Example -

ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: #111; } .active { background-color: #4CAF50; }

Run Example

Main 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)

Example -

* { box-sizing: border-box; } body { margin: 0; } /* Style the topnav links */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* Change color on hover */ .topnav a:hover { background-color: #ddd; color: black; } /* Create three equal columns that floats next to each other */ .column { float: left; width: 33.33%; padding: 15px; } /* 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 */ @media screen and (max-width:600px) { .column { width: 100%; } }

Run Example

Create a Web Footer

Learn how to create a footer with CSS.

Example -

/* Footer */ #footer { background:#4CAF50;} #footer-inner { margin:auto; text-align:center; padding:2px;}

Run Example