CSS:Layouts101

From mi-linux
Jump to navigationJump to search

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:

A simple layout drawing

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

<nowiki><!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>

This is the Content of the page

Very interesting content - wouldn't you agree?

 </BODY>

</HTML>

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.

Stage 4: Tidy up the presentation