Subcide

5. The major elements

We need to add 5 divs, all with individual id's that describe their purpose. These divs will correspond to the major areas of the design we identified in step 2. Replace the Hello World. text with the div's below. Just for now we'll also put text inside the divs for easy visual identification when we view the page.

<div id="page-container">

	<div id="main-nav">Main Nav</div>
	
	<div id="header">Header</div>
	
	<div id="sidebar-a">Sidebar A</div>
	
	<div id="content">Content</div>
	
	<div id="footer">Footer</div>

</div>

Your page should now look something like this:

Without CSS, the divs will be arranged from top to bottom, one under the other, in the same order as they are in the code. This is usually refered to as the 'flow' of the document.

So lets use the information we have to make our divs the correct size.

Remove the red background from the #page-container, and add a new rule for #main-nav. Set the background of the main nav to red so we can see it, and set its height to 50px:

#page-container {
	width: 760px;
	margin: auto;
}

#main-nav {
	background: red;
	height: 50px;
}

Notice we didn't specify the width of the div. This is because by default, a div will stretch to fill its parent container, which in this case, is our #page-container div that was set to 760px wide.

Do the same thing for the header div, using the height we got in step one. Make this one blue.

#header {
	background: blue;
	height: 150px;
}

While we're at it, lets do the footer. The footer can be orange.

Remember when writing your stylesheet, that you should group your styles together. So all the header styles would go together. All the footer styles would be together, and all the navigation styles would be together. Also I find it helps to structure them in a similar order to the HTML, so header near the top, footer near the bottom.

#footer {
	background: orange;
	height: 66px;
}

Now the next 2 divs are slightly different. The heights are dependant on the content that's inside them, so we wont set a height. Lets make them darkgreen, and green. Put the rules inbetween the header and the footer rules in the css. This makes them easier to find once the stylesheet gets larger.

#header {
	background: blue;
	height: 150px;
}

#sidebar-a {
	background: darkgreen;
}

#content {
	background: green;
}

#footer {
	background: orange;
	height: 66px;
}

If all has gone well, you should have a page that looks like this: