Hello and welcome to the fourth and final installment of our Web Design Basics series. In this tutorial, we will be following up our new HTML skills with the relevant CSS skills to create a basic page structure for our website. If you have not been following the series so far, please head to the first installment, Basic HTML. To get started, open up your style.css file created in the second installment, Basic CSS. You might find it easier to understand if you also have index.html open, so go ahead and open that too.

Now, in the last tutorial we covered HTML classes. CSS is able to pick up on the class attribute and use it to style any element with a particular class. In the basic CSS tutorial, we learnt how to style HTML tags in their purest form, but, as we are using more than one DIV tag, and would like to style them individually, we use the Class attribute to uniquely identify them. With me so far? Good.

Once you have opened up your style.css file, go ahead and delete everything in there, we will be starting again, using the class system mentioned above.

.header{
    margin-bottom:10px;
}
.sidebar{
    background-color:#eee;
    float:left;
    position:relative;
    left:300px;
    margin-left:-300px;
    width:300px;
    min-height:400px;
}
.contentWrapper{
    float:left;
    width:100%;
}
    .content{
        background-color:#ccc;
        margin-left:300px;
        min-height:400px;
    }

Now, there’s a lot going on here, but bare with me, I’ll explain it all! As you can see, we have three main elements here, a header, a sidebar and a content container. These three elements work just as you would imagine, there’s a wide header, a fixed sidebar and a content container that takes the remaining width. CSS uses a period ‘.’ and hashes ‘#’ to define ID attributes. The syntax follows ‘.Class’ or ‘#ID’ followed by the curly braces.

The header styling is fairly self-explanatory, we have included a margin at the bottom to give it some extra padding (so that it does not but-join the rest of the content). The sidebar and content container, however are a little more complicated. For this structure, we would like to have a fixed-width sidebar and a content container that takes the remaining width. In order to do this, we need to define some CSS styles that will tell the HTML what to do. The sidebar has a width of 300px. This means that if the content container assumes a width of 100% then it would be forced onto a new line as there is not enough room in the parent <body> container to fit. To get around this, we push the sidebar off the page with the attribute margin-left:-300px; this means that the content container will be able to assume its 100% width. However, we also would like to see the content in the sidebar, so to do this, we add left:300px; which will force the content inside the sidebar back into its native position. This allows the content of the sidebar to appear in the right position, whilst allowing the container to assume a 100% width. If we left the site in this state, we would encounter a problem. Because, by default, CSS will flow content from left to right, the text in content <div> will be displayed underneath the sidebar. To counteract this, we add another div as a child element of the contentWrapper with a margin of 300px on it. This means that the content will now counteract the sidebar and show the text in the right place.

The remaining style elements are required to make the previously described elements work. For example, float:left; is required to ensure that the <div> tags flow in the right way, if we were to use float:right; then the sidebar would appear on the right (of course, we would have to swap our lefts to rights in the remaining CSS styles!). The style position:relative; is required to push content from its initial position. For example, left:300px; combined with position:relative; will mean that the <div> is pushed to the left by 300px relative to its normal position. Several other position attributes include position:fixed; which will position an element relative to the browser window (and will ignore scrolling the page), position:absolute; which will position the div relative to the top-left of its parent and position:static; which is the default position (and will ignore left, right, top, bottom parameters). The background-color property is self explanatory and takes a hexadecimal or rgb value. We have included a min-height of 400px to ensure that we can see the elements properly. If you have followed these 4 tutorials, you should be seeing a basic website structure:

Screen Shot 2014-02-18 at 12.52.37

Note, I remove the <p> tag from index.html, to remove the margin that the <p> tag creates. This particular usage of CSS is complex and if you can understand this, you’ll be ok learning the rest of CSS! We will be taking things a lot further in the next series of tutorials with even more advanced uses of HTML and CSS in our Web Design Advanced series. Remember, if you have missed anything along the way, return to the earlier episodes, or seek advice on the W3Schools website. Thank you and happy designing!