CSS:Layouts101
Layouts
One of the primary strengths of CSS is being able to layout a page ALMOST EXACTLY as you want to. HTML by itself can be limited in this sense, but CSS allows the extension of the box model to produce almost any layout.
Layout 1: 2 boxes side-by-side
Stage 1: The Drawing
The first stage to approach layouts is to draw a simple diagram of how you would like a web page to be presented:
Stage 2: The Divisions
In order to achieve this layout we need two "divisions" - let's create them in HTML
HTML Document - no CSS yet
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>CSS 5</TITLE>
<LINK rel="stylesheet" href="style5.css" type="text/css">
</HEAD>
<BODY>
<DIV id="menu">
This is the menu
<UL>
<LI>Item 1</LI>
<LI>Item 2</LI>
<LI>Item 3</LI>
<LI>Item 4</LI>
<LI>Item 5</LI>
</UL>
</DIV>
<DIV id="content">
<H1>This is the Content of the page</H1>
<P>Very interesting content - wouldn't you agree?</P>
</DIV>
</BODY>
</HTML>
Your screen should look like this (or similar):
Stage 3: Match the divisions to the drawing
Take a look at the page generated above - you'll see that the content isn't where we want it to be. In order to do this, we can "float" the first division above the second.
Create the following CSS file (and save as style5.css)
#menu {float:left}
Now reload the page - what do you see?
We're making progress - at least the divisions are in the right place.
Stage 4: Tidy up the presentation
Let's put some more content in the CSS to improve the appearance.
Modify the CSS to the following:
#menu
{
float:left;
border: 2px solid #0000ff;
margin: 10px;
padding: 10px;
}
The page should now look something more like this:
Now we'll do the same for the content division
#content
{
border: 2px solid #ff0000;
margin: 10px;
padding: 10px;
}
The page should now look something more like this:
This isn't what we want, but it emphasises the concept of "floating" - because the menu division is floating above the content division, the menu division passes BELOW the content division, and the content division is overlapping.
There are a number of ways in CSS to fix this, but the easiest (in this example) is to also "float" the content division, since floating divisions appear side-by-side (as long as there is space) - change the content division CSS to also include a float statement:
#content
{
float: left;
border: 2px solid #ff0000;
margin: 10px;
padding: 10px;
}
The page should now look something more like this - this is pretty close to what we want:
Ready to move on?
When you're happy with the concepts introduced in this chapter, take a look at CSS:Layouts102 for some more layout ideas, and how to implement them.
