New Tutorials:   NUMPY    TKINTER    KOTLIN    JAVASCRIPT    SASS/SCSS    PL/SQL    Matplotlib    C++ Programs
See the Tutorial List

Desigining a basic Webpage Layout

We have come a long way now. We have learnt many CSS concepts that can easily be put to use to design our website/webpages. In this tutorial, we will learn how to setup a basic webpage with a header, footer, sidebar and body section.

This webpage also follows the same structure. We have a header, a footer, a sidebar with all the tutorials listed and the body part where the tutorial is.

Basic webpage layout with css

Header and Footer are basic, and we have only provided a background-color and some padding to it. You can add more styling to make them look different.

#header, #footer {

#sidebar {
    padding: 30px 10px;

#sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;

#sidebar li {
    padding: 6px;
    margin-bottom: 10px;
    background-color: #10A2FF;
    color: #ffffff;

#sidebar li:hover {
    background-color: #009AFB;

#content {
    /*margin from left equal to width of sidebar*/

#main-body {

The #main-body style only has one CSS property of overflow:auto; to contain the floating sidebar inside it.

We have added the CSS property float:left to our sidebar and to bring the content and sidebar side by side, we added a left margin equivalent to the sidebar's width to the content section.

Live Example →

Finally! we know how to setup a basic webpage layout. To practice, move the sidebar from left side to right side. You will have to change the float property of the #sidebar style and the margin property of the #content style.