HTML Section 6: CSS Layouts

CSS Positioning - the box model

In this section, you'll learn how to lay out your web pages using CSS positioning. Before doing so, however, it helps to learn about something called the CSS Box Model.

The CSS Box Model

An HTML page is regarded as a series of boxes stacked one on top of the other. These boxes can hold text in paragraphs, images, form objects, etc. Each box is divided up into four areas: a margin, a border, some padding, and finally the content itself:

The margin is transparent and goes around the border. You can't set a colour for margins. It can be big, as in the image above, or set to zero and snuggle right up against the border.

The border goes around the padding and the content. It can take a colour, a size, and a border type (dotted, solid, etc).

The padding is the space between the content and the border. It takes the same colour as the background for the entire box.

The content is things like text and images - the whole point of the box.

All four areas can have their sizes set. In the code below, we've set up two paragraphs of text:

All we're doing is setting a height and width for two paragraphs of text. We're then setting the margin, the border, and the padding. (We've also added a colour so you can see what it looks like in the browser.) Here's the result:

Notice the size of the margins surrounding the border. The first margin is 30 pixels on all four sides. You can set individual sides, if you want:

margin-left: 10px;
margin-right: 20px;
margin-top: 30px;
margin-bottom: 40px;

By just using margin, though, you're setting the margin for all four sides. The same is true for border and padding: you can set all four at once, or just set individual values by adding top, right, bottom, or left.
To get the total size of the box, you add up all four parts: margin, border, padding, content. For example, in the code above we have a width of 300 pixels for the first paragraph (the width refers to the content area). The margin is 30 pixels on each side, giving a total margin width of 60 pixels. The border is 1 pixel on the left and 1 pixel on the right. The padding is 20 pixels on the left and 20 pixels on the right. The total width of the entire box is therefore:

Left margin 30
Right margin 30
Left border 1
Right border 1
Left padding 20
Right padding 20
Content width 300

Total box width = 402 pixels

So although we specified a width value of 300 pixels, the width of the box around the entire paragraph was actually 402 pixels. You need to bear this in mind when setting values like this, especially when you float elements left and right. For example, if you have a navigation area floated left then it's a good idea to set the width value, and all of the others values: just remember to add up all the different sizes when calculating the overall size.

Adding Comments to CSS Code

When you're experimenting with the CSS, you can use comments instead of replacing or deleting code. Examine the following:

/* background-color: blue; */
background-image: url(../images/gradient_1.jpg);

The comment symbols are these:

/* */

The new symbols will turn any code into comments, meaning the browser will ignore the line. You can comment out more lines by moving the left or right comment symbols. Like this:

In the code above, the last three lines have been commented out, so they will be ignored.
Comments are quite useful for reminding yourself what a particular rule does. For example:

Try to add comments wherever possible. When you come back to your code a few weeks down the line, it will make more sense if you've added comments.

Positioning Elements with CSS

In HTML, elements like paragraphs, images, etc, are stacked one on top of the other, rather like boxes in a warehouse. The image below is taken from a browser, and shows three paragraphs stacked one on top of the other. (We've given each image a border so that you can see them better. Notice that the paragraphs stretch all the way across the page, even though we only have a few words of text in each.)

Here's the HTML and CSS code for the above page:

You can move your elements around the page, however, with something called CSS positioning. The default behaviour is said to be in a Static Position, like the paragraphs above - in other words, they don't move.
But you can move elements out of the normal, Static flow seen above. The first method we'll look at is called Relative positioning.

Relative Positioning

Suppose we want to move paragraph two down the page a little. Like this:

The above effect is done using the CSS instruction position: relative. You then use the properties top, bottom, left, and right. You can use all four at once, or just one, two, or three of them. Here's the CSS code that moves paragraph two down the page:

P.rel {

border: 1px solid green;
position: relative;
top: 70px;

}

And here's the HTML code:

<P class="border1">Paragraph One<P>
<P class="rel">Paragraph Two<P>
<P class="border1">Paragraph Three<P>

So each paragraph has a CSS Class associated with it. The second paragraph has Class="rel". The rel class uses position: relative, followed by the top property with a value of 70 pixels. What this does is to move the paragraph down 70 pixels, but relative to where it was. So it's not 70 pixels down from the top of the browser window. It's 70 pixels down from where you first positioned it: the top position of 0.
Another thing to notice here is that using position relative moves the paragraph out of its normal flow but leaves a gap where it used to be.

Position Absolute

Another way to position elements on the page is with absolute positioning. You can use position: absolute to place elements anywhere on the page.
Absolute positioning removes an element out of the normal, static flow. Other elements will move up to fill its place. The element you have just removed from the normal flow is now like a free-standing element. (The borders of the removed element shrink to fit the contents. If you want more space you have to specify it with width and height properties.)
Items that are given an absolute position are placed in relation to their parent element. If no parent element exists then the default is the HTML tag. To illustrate what this means, take a look at the image below:

Here, we've placed a paragraph of text at the top, followed by two images, one below the other.Now take a look at the HTML code:

The paragraph of text has an inline style setting its border to green. We then have two sets of DIV tags. The red ones are the outer DIV tags. Think of these as the parent tags. Inside the parent DIV tags are two inner DIV tags, the blue ones. For each set of DIV tags we have an image.
However, if we were to set the blue rectangle to have a top position of 0, what do you think would happen? Where would it move to? Well, take a look at the CSS code with just position: absolute:

The first thing we've done is to set values for the HTML and BODY tags. We've set the margin to 10 pixels and the padding to 0. This is just so that you can see the images more clearly.
For the relative positioning, we've commented out position: relative. You'll see why in a moment. For the absolute position, we've commented out the top value of zero. The question is, if we take out the comments for top: 0px where will the blue rectangle end up? Here's what happens in the browser when we do just that:

The blue rectangle jumps right to the top of the browser window. The reason is does so is that its parent element, the outer DIV, has no position set. In which case, the position: absolute of the inner DIV tags uses the HTML tag as a parent. So the browser window is now top: 0px.
When we take the comments out for position: relative, however, here's what happens:

The top: 0px position is now using the outer DIV as a parent. The blue rectangle can't move up any further than this, so it covers up the pink rectangle - it's placed on top of it.
This is all quite complicated. So just bear in mind that when using absolute positioning, you have to take the parent element into account. If you don't set a parent element that uses the position CSS property then the HTML tag is used.

Fixed Position

The final CSS position is position: fixed. This is similar to position: absolute in that you use it when you want to take an element out of the normal static flow. For example, you could have a side bar on the left of your page using position: fixed. The difference is that the position properties (top, bottom, left, right) take the top left of the browser window as their default starting position. Also, when you scroll down the page the fixed element, the side bar for example, will stay in place. So if you have fixed sidebar in the top left of your page it will stay there when the users scrolls to the bottom of your page.

Z-index

When you use the position properties you also have access to something called the z-index. This is just the stacking order for elements. So you could have images stacked one on top of the other, each one offset a few pixels. Here are our two rectangle images with a z-index set. The pink one is on top, while the blue one is behind it and offset using the top and left properties:

Here's the CSS code that was used:

The default z-index is called auto and has a value of 0. If you want to position something behind an element, you can use a negative number. If you want to position something in front of other element you can use a positive number. If you only have two elements you can just use 0 and -1. In fact, you can miss out the z-index: 0 altogether, as this will be the default position.
Try not to worry too much about z-index - it's rare that you need it.
One final thing about position properties before we move on: you can use negative number for your top, bottom, left and right values. For example, here's our two rectangles moved off the page to the left:

This is done simply by setting a left value with a negative number:

#pos_relative {

position: relative;
left: -50px;
z-index: 0;

}

Exercise
Experiment with negative values for the other position properties to see what happens.

The CSS Float Property

Another way to manipulate the normal, static flow of your web pages is with the float property. You have already used this property in a previous section to wrap text around images. But you can also use the float property to have columns of text side by side. You can even use float to have navigations bars on the left and right of your pages. (We'll use float in our page layouts, which are coming up soon.)
As an example of column floating, have a look at the image below, taken from a browser:

So we have two columns of text side-by-side. The first one has a grey background so you can see the column better. It also has a 10 pixel margin. Here's the CSS:

And here's the HTML:

For the HTML, we've just used the DIV tags for two paragraphs of text. The first paragraph has the CSS class applied to it.
Notice two things about the CSS code, though. The first thing to notice is that we have used float: left. The second thing to notice is that we have set a width for the column of 200 pixels. If you don't set a width then any text you have for your column will simply flow from left to right.
There is a problem with our approach, however. Have a look at the columns in the browser again. Although they look nicely side-by-side, this is only because we manipulated the browser. We deliberately made it smaller so that the text resized itself. If we make the browser bigger, here's what happens:

The text in the second column will stretch from left to right to fill the available space.
To stop it doing that, you can add the class to the second DIV, as well:

Now both paragraphs of text are floated left, and have a width of 200 pixels. The browser can now be resized and the two columns will stay in place.
To start text on a new line underneath the columns, you can use the clear property in CSS, remember:

.clear {

clear: left;

}

This clears the float value and returns you to the normal, static flow. (You can replace left with right or both depending on your needs.)

A Simple One Column Layout with HTML5

The easiest layout to implement with CSS is a one column layout. This is just a series of boxes stacked one on top of the other. We'll have a Header area, a horizontal navigation menu, an area for the contents of the page, and finally a Footer. The layout we'll design looks like this:

As you can see, it's fairly straightforward: Header area at the top, navigation bar, page content, then Footer.
The first thing to do is the HTML. The CSS can then be added on top of this.
Have a look in the templates folder that you download with this course (extra_files/templates). (If you haven't got the extra files yet, the download location is here, under the heading Web Design - New Course : Download the Extra Files needed for this course (You don't need the downloads for the old course.)
Open up the template called template_one_col.txt. You should see the following HTML:

There are quite a few tags here that you haven't met before. These tags are new to HTML5, and are not present in previous versions. They are:

HEADER
NAV
SECTION
ARTICLE
FOOTER

In previous versions of HTML you just used the DIV tags in place of the ones above. The new ones are called Semantic tags. They don't actually do anything by themselves - they are just there to make things clearer for you (and perhaps search engines). If you use DIV tags for everything, then page code can get very messy and confusing.
Let's have a look at our code, though.
Starting at the top, we have a HEADER tag:

<HEADER>

<H1>Top Header</H1>

</HEADER>

The HEADER tag is not just at the top of the page. If you look further down the page you can see that we have another pair of them:

<HEADER>

<H2>Section Title</H2>

</HEADER>

The HEADER tag should be used when you want a nice heading for different sections of your page. Our first HEADER is for some H1 text. Since it's at the very top of our page, however, we could replace the H1 tags with, say, an image to use as a site banner.
Our second HEADER is surrounding a pair of H2 tags. This could be the title of an article that we want people to click on.
After the top HEADER tags we have a pair of NAV tags. These are surrounding an unordered list that we want to use as a navigation bar. Previously, we had DIV tags surrounding our unordered list. Now, it's much clearer what this list is being used for.
The next Semantic tag is SECTION. We have two pairs of these. The first pair are at the top and bottom of the page:

These SECTIONS tags hold the main content of the site.
In between the first pair of SECTION tags we have an ARTICLE tag. As the name suggests, these are used for when you want to separate an article of text from the rest of your site. You may well have more than one article, in which case you can use another pair of ARTICLE tags. Like this, for example:

Here, we have two articles on the page. Each pair of ARTICLE tags has a HEADER and a SECTION. The HEADER tags have been turned into hyperlinks, while the SECTION tags are used for the headline of the story.
Save your template as a HTML file. Save it in a new folder called layouts. For the file name, typelayout_one_col.html.
When you load the page in a browser, you'll see this:

Because we used only HTML tags the page looks quite basic.
One last thing to do before we get to the CSS. Add the following ID attributes to your HTML code:

So there are five ID attributes to add, highlighted in bold above. (Incidentally, these can be CLASS selectors rather than ID selectors, if you prefer. Using ID means that you can refer to them in a scripting language like JavaScript, as well as using CSS.)

Styling a one column layout

Rather than you having to type out all the CSS for this template, have a look in the extra_files/cssfolder that came with this course. (If you haven't got the extra files yet, the download location is here, under the heading Web Design - New Course : Download the Extra Files needed for this course (You don't need the downloads for the old course.)
Locate the file called one_col_style.css. Copy it to your own CSS folder. Then, in the HEAD section of your HTML, insert the following line:

<LINK REL=Stylesheet TYPE ="text/css" HREF="../css/one_col_style.css">

This is, of course, a link to the stylesheet we're going to be using.
Once you have inserted the link, save your work and view the results in your browser. The plain HTML page should transform into this: (The colours we have chosen are simply so you can see the various sections - they are a bit garish!)

If it's still a plain HTML page, make sure your HREF reference is correct in the LINK code above. Did you copy our file to the correct location?
We'll now go through the CSS and see how it works. So open up the CSS code and take a look at it.
The first thing to examine is this:

header, footer, section, nav, article {

display: block;

}

We're setting up a rule that will apply to all five items in out HTML code. Notice how all five items are separated by commas. You can do this kind of thing for other CSS selectors as well. For example, if you wanted to reset the CSS to browser defaults, you can do this:

body, h1, h2, h3, p, ul, li, {

border:0;
margin:0;
padding:0;

}

The reason you'd want to reset like this is because different browser have different default values. You'd then set your own values that override the defaults. For more information on resetting, see these pages:

http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/
http://meyerweb.com/eric/tools/css/reset/
http://html5doctor.com/html-5-reset-stylesheet/

But in our code, we're just making sure that older browsers deal with our newer HTML5 elements correctly.
Next in our CSS code, we set up some general rules for everything between the two BODY tags:

BODY {

margin: 0 auto;
width: 940px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;

}

The first line deals with the margins, setting them to zero, Notice the auto part, though. What this does is to centre everything on the page.

Exercise
Delete auto from your CSS code in the BODY selector. Save and refresh the page in your browser. Put auto back in when you're finished.

We're doing three other things for the BODY tag: setting a width of 940 pixels, setting the font family, and setting the font size. Play around with these values and see what happens.

Fixed Sizing versus Liquid Sizing

We've specified a fixed size of 940 pixels in our code. There is a problem with this, however. Suppose you want your site to be viewed not only on a monitor attached to a computer but also on a mobile phone. The fixed size means it will be too wide on the phone. The alternative is fluid sizing.
With fluid sizing, the values are not in pixels but in percentages. For example, instead of specifying a value of 940 pixels, we could have written something like 80%. If you are targeting more than one platform then go for percentages for your values, especially for widths (heights can stay on pixels, though).

Styling the HTML5 Tags

Styling the HTML5 HEADER Tags

The styling for our first HEADER tag is this:

HEADER#Banner {

width: 940px;
height: 100px;
margin: 5px auto;
border: 1px solid #000000;
text-align: center;
background-color: blue;

}

Notice the first line:

HEADER#Banner

This references the Banner ID in the HEADER tag. A hash/pound symbol separates the two, with no spaces between. You can miss out the HEADER at the start of the line, though, and the code would still work. Leaving it in, however, makes it more readable.
You'll also see that the HEADER has a background colour set:

background-color: blue;

Play around with the colour values, here. You can also experiment with images as your top banner. Just replace color with image. The code is this:

background-image: url(../backgrounds/gradient_1.jpg);

In the code above we have a path to our image file between the round brackets of background-image. The image itself is the same width and height as the ones in HEADER#Banner
The CSS code for the second pair of HEADER tags was this:

HEADER#Header_Article_1 {

width: 900px;
height: 60px;
background-color: #DCDCDC;

}

This second HEADER has a different ID than the first one. It's more of a subheading, really, so needs to be styled differently.

Styling the HTML5 FOOTER Tags

For the FOOTER area, the code is similar to the HEADER:

FOOTER {

width: 940px;
height: 40px;
margin: 5px auto;
border: 1px solid #000000;
text-align: center;
background-color: yellow;

}

Notice that with both the HEADER and the FOOTER we don't have to apply an ID or CLASS attribute – they act just like a HTML selector. We only add an ID or CLASS when we want to distinguish one HEADER from another, or one SECTION from another.
Footers are a good place to put any extra information about your site: links to site maps, return policies, copyright info, etc.

The Nav Bar

You've met the NAV bar code before in the last section - it's just a HTML list with some CSS formatting applied. It is slightly different, however, so compare this one from the last horizontal navigation bar you added. Notice that this one doesn't need any DIV tags - you can just use the NAV tags in HTML5 to do the same job.

Styling the HTML5 SECTION Tags

Our first SECTION tag is used to hold the contents of the page - it is just used as a wrapper. The only code here is this:

SECTION#Wrapper {

margin-top: 100px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 50px;

}

Here, we're just setting a margin for the main contents of the page. But because we have more than one SECTION tag, we use the ID attribute to specify which of the two we want to format.
The second SECTION has the following CSS:

SECTION#Section_Article_1 {

width: 850px;
height: 400px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
background-color: #F8EBEB;

}

This section sets a width and height, and will hold the contents of an article, or any contents, really. We've also set some margins, here, to create some space. The background colour is just so that you can see that particular section. It doesn't have to be there at all.

Styling the HTML5 ARTICLE Tags

The ARTICLE tag in our HTML code again acts as a wrapper for other contents. The idea is that you have one pair of ARTICLE tags per article (or whatever contents you have).

ARTICLE#Article_1 {

width: 900px;
height: 500px;
background-color: #ADAAAA;

}

Again, no ID or CLASS needs to be set up – the ARTICLE tag acts like a HTML selector. However, we've added the ID to distinguish it from other ARTICLE tags that may be on the page. That way, you can format each ARTICLE differently, if you wish. We only have one ARTICLE so the ID is not strictly necessary.

Exercise
Try out some different styles, experiment with margins, padding, borders, backgrounds, and anything else that takes your fancy. Try adding a banner image for the top header instead of a colour.

A Two Column Layout Using HTML5 and CSS

For the two-column layout, there is a HTML page and a CSS script already created for you. The HTML page is in the extra_files/layouts folder that came with this course, and the CSS script is in the extra_files/css folder (two_col_style.css).
(If you haven't got the extra files yet, the download location is here, under the heading Web Design - New Course : Download the Extra Files needed for this course
Open up the HTML page first and take a look at the code. The page is calledlayout_two_col.html, and the code looks like this:

The code is identical to the one column layout! (Well, accept for a second article added.)
When the page is viewed in a browser, it looks like this:

The first column holds the navigation bar. But it doesn't have to. You can still have a navigation bar at the top. The first column can then hold anything you like: special offers, news, previous blog entries, etc.
The second column is for the main contents of the page. Here, we have two articles. Again, the background colours are just so that you can see each section.
Open up the two_col_style CSS file and take a look at the code. Compare it to the one column layout. Again, there's not that much difference.
The part that moves the navigation bar to the first column is the float: left in the NAV class, and the display: block in the NAV list class. You then play around with the widths and height to get the look you want.

Exercise
Play around with the various CSS values and see what happens when you reload the page. For this exercise, it's better to copy our file into your own HTML folders, that way you'll leave the original untouched.

Exercise
Research navigation bars on the internet. You can start with this page:

http://www.maxdesign.com.au/articles/css-layouts/

It is a bit old, now, but still gives you a good idea of what CSS layouts are all about.

CSS used in the Positioning section

CSS Property	CSS Value	Explanation
/* */	A colour	CSS comment - more than one line
//	A colour	CSS comment - one line
position:	relative, absolute, fixed	Types of positioning
top	A pixel value	Position an element on the page
bottom	A pixel value	Position an element on the page
left	A pixel value	Position an element on the page
right	A pixel value	Position an element on the page
z-index	A numerical value	Used to stack elements one behind the other
float	left, right	Float an element left or right
clear	left, right, both	Clear a floated element

HTML5 Layout Tags

HTML5 Tag	Comments
HEADER	Used for the heading of any section
NAV	Used for a navigation area
SECTION	Used for a section of your web page
ARTICLE	Used for an article in a section of your web page
FOOTER	Used for the footer area