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.


    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 -

    Navigation Bar

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

    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 -

    Create a Web Footer

    Learn how to create a footer with CSS.

    Example -