Creating a single-column CSS layout

This tutorial will use what we already know about HTML and CSS from the previous tutorials and introduce a couple of new concepts in order to create a basic layout for a web page.

In this tutorial we will use the following CSS properties that we looked at in the previous tutorial:

      • float property – with the float property, an element can be pushed to the left or right letting other elements on the web page wrap around it. It is often used to arrange images and for div layouts.
      • clear property – with the clear property, we can specify which side or sides of an element that are floating elements aren’t allowed to be. The float property can be set to none, left, right, both, or inherit (inherit from the parent element). Setting the clear property to ‘both’ for a div means that no other floating divs can be to the left or the right of this div.

    For this tutorial we will make a web page with a header, a navigation sidebar (or menu), the main content section, and a footer. The layout will look something like this:

    CSS layout
    The layout contains four divs: header, nav, section, and footer.

    Watch the video below and then scroll down to check out the sample HTML and CSS code.

    Here is the HTML code for the web page. There are four divs with the IDs header, nav, section, and footer. The CSS external stylesheet is in a resources directory and is called theme.css.

    <!DOCTYPE html>
    <html>
    <head>
     <title>Basic CSS Layout</title>
     <meta charset="utf-8"/>
     <link rel="stylesheet" href="resources/theme.css" type="text/css"/>
    </head>
    <body>
     
    <div id="header">
     <h1>My website</h1>
    </div>
     
    <div id="nav">
     <a href="#">Home</a><br>
     <a href="#">About</a><br>
     <a href="#">Products</a><br>
     <a href="#">Support</a><br>
     <a href="#">Contact us</a><br>
    </div>
     
    <div id="section">
     <h2>Welcome to my website</h2>
     <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
     <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
    </div>
     
    <div id="footer">
     Copyright....2015.
    </div>
    </body>
    </html>

    And here is the CSS code in the external stylesheet.

    #header{
     background-color:#0C60CE;
     color:#FFFFFF;
     text-align:center;
     padding:5px;
    }
     
    #nav{
     line-height:25px;
     background-color:#7D9DC7;
     height:300px;
     width:150px;
     float:left;
     padding:5px;
    }
     
    #section{
     width:500px;
     float:left;
     padding:10px;
    }
     
    #footer{
     background-color:#0C60CE;
     color:#FFFFFF;
     clear:both;
     text-align:center;
     padding:20px;
    }

    Tips:

    • You already know how to add background images to a div or body of a web page. Why not use an image for your header div’s background instead? Or try using gradients (something we will look at in a later tutorial).
    • Try adding a sidebar to the right and try using buttons for the menu instead of boring text links.
    • If you don’t know what a div is, then you’ve skipped some tutorials – go back here 😉