Page Layout

Layout with CSS is easy.

You need to look at each part of the page as an individual chunk that you can shove wherever you choose. You can place these chunks absolutely or relative to another chunk. We will use the <div> tag to create elements we can push around our page. You can use CSS to manipulate any element, but the div tag is specifically for laying out major chunks of your page.

Positioning

The position property is used to define whether an element is absolute, relative, static or fixed.

Static is the default value for elements and renders the position in the normal order of things, as they appear in the HTML.

Relative is much like static, but the element can be offset from its original position with the properties top, right, bottom and left.

Absolute pulls an element out of the normal flow of the HTML and delivers it to a world all of its own. In this crazy little world, the absolute element can be placed anywhere on the page using top, right,bottom and left.

Fixed behaves like absolute, but it will absolutely position an element in reference to the browser window as opposed to the web page, so, theoretically, fixed elements should stay exactly where they are on the screen even when the page is scrolled.

Layout using absolute positioning

You can create a traditional two-column layout with absolute positioning if you have something like the following HTML:

Save this code in a new file called index.html in a new folder called "Lesson3"

And if you put the following into a new web.css file in the same folder:

Your index.html page should now look like this

You will see that this will set the navigation bar to the left and set the width to 10 em's. Because the navigation is absolutely positioned, it has nothing to do with the flow of the rest of the page, so all that is needed is to set the left margin of the content area to be equal to the width of the navigation bar.

How easy. And you aren't limited to this two-column approach. With clever positioning, you can arrange as many blocks as you like. If you wanted to add a third column, for example, you could add a 'navigation2' chunk to the HTML (the new section is highlighted).

And change the web.css to:

Your index.html page should now look like this

Let's add some colours so we can see more clearly where the elements are.

Your index.html page should now look like this

The only downside to absolutely positioned elements is that because they live in a world of their own, there is no way of accurately determining where they end. If you were to use the examples above and all of your pages had small navigation bars and large content areas, you would be okay, but, especially when using relative values for widths and sizes, you often have to abandon any hope of placing anything, such as a footer, below these elements. If you wanted to do such a thing, it would be necessary to float your chunks, rather than absolutely positioning them.

Floating

Floating an element will shift it to the right or left of a line, with surrounding content flowing around it.

Floating is normally used to position smaller elements within a page, but it can also be used with bigger chunks, such as navigation columns.

Now apply the following CSS:

Your index.html page should now look like this

Lets add a bottom div to our page.

If you do not want the next element (in this case the footer) to wrap around the floating objects, you can apply the clear property. clear: left will clear left floated elements, clear: right will clear right floated elements and clear: both will clear both left and right floated elements. If one of our columns was short and we didn't clear our footer, it would display over the columns.

Add the following CSS:

Your index.html page should now look like this

Lets also add a banner at the top of our HTML:

And give it some style:

Your index.html page should now look like this

Now lets add some more borders and margins to make our page look a bit more like a "real page"

Your index.html page should now look like this

Fixed width Page

Quite often, web pages are layed out as a block of fixed width in the middle of your browsers window. To do this we need to nest all the divs we have already inside a "container" div.

Just after your <body> tag, add:

<div id="container">

And just before the end of your body (</body>) add:

</div>

Now add this CSS:

Your index.html page should now look like this

And now you have a fixed width page. We can make it look a bit better by adding some padding and background colors.

Your index.html page should now look like this

This has been a general introduction to positioning and floating, with emphasis to the larger 'chunks' of a page, but remember, these methods can be applied to any element within those chunks too. With a combination of positioning, floating, margins, padding and borders, you should be able to represent ANY design there is.

The Menu

Let's make the left hand navigation look a bit nicer.

Your index.html page should now look like this

Challenge!

Edit your web.css file to make your html page look like the one pictured below. Only edit your css file, not your html one.

Have a look at the live web page to see what happens when you hover over the links.

Here's the css file, but don't look at it unless you are completely stuck!