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.

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 {
    background-color:#EEEEEE;
    padding:15px;
}

#sidebar {
    float:left;
    width:25%;
    background-color:lightblue;
    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 {
    width:75%;
    /*margin from left equal to width of sidebar*/
    margin-left:25%;
    padding:10px;
}

#main-body {
    overflow:auto;
}

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.