Creating A Basic CSS Webpage (Part 4)

Hey

This part of the tutorial will be designed to show you how to make the content wrapper and the left and right elements of the page. It is very easy.

Step 1) Using the previous code we need to create a wrapper that will contain the left and right parts of the content. Apply the following style.

#content {
overflow:auto;
width:100%;
}

This makes sure the overall dive stretches as the content grows.

To make the wrapper add the following code underneath the header wrapper as shown below.

div id="content">
/div>

So it looks like this.

div id="wrapper">
div id="header">
/div>
div id="content">
/div>/div>

This means that the content wrapper is underneath the header but still located in the wrapper div. There is no need to give this div any properties, it is just used to hold the next elements in. It also makes it easier to re find code because you can easily search for the content wrapper.

Step 2) The next step is to make the left and right div for use as the main content and sidebar content respectively. We first need to make a new style for each of the elements. I'm deviating from the original plan slightly. In the image I whipped up I had the main div inside another div, this is not needed. So I am leaving it out.

The style for the left and right divs are shown respectively. They are pretty much similar.

#left{
float:left;
width:500px;
background:#DDDDDD;
display:block;}

#right {
float:right;
width: 200px;
display:block;
background:#707070;}

Notice the "float" syntax this will be used to float the div's left and right respectively. You can name the div's to something more suitable such as sidebar. I've used those names for clarity. You need to make sure the widths are correct and add up to the size in you sidebar, otherwise there will be elements all over the place. You also need to make sure that display:block is displayed so the div fills all the way up when something is added.

Step 3) The next step is to add in the div's. They both need to be added inside the content div. As shown below. Tabs haves been added for clarity.

div id="wrapper">
div id="header">
/div>
div id="content">
div id="left">
/div>
/div>
/div>

If you view it you wont see anything. This will be solved in the next step.

Step 4) In the wrapper style remove the height syntax line and add in teh overflow line. It should now look like this.

#wrapper {
width:700px;
background:#ffe2e2;
margin:50px auto;
overflow:auto;
}

Step 5) All you now need to do is add some text between the id and the end of the div tag as shown below.

div id="left">
This is left Text
/div>
div id="right">
This is right hand text
/div>

The more you add the bigger the div will come and we are in business.

You don't no how long I spent trying to make the wrapper div stretch, the problem was down to the floating elements and as a result the outer wrapper div was not playing ball. I found out how to do it eventually from here.

The next tutorial will be making it look more pretty.