Web Page Layout with Cascading Style Sheets

Dated: 28 June, 2007
Author: Jason Gonzalez

You are here: jgpws.com/Tutorials/CSS/css_layout1.html

Okay. So you might have heard that Tableless designs for web pages using Cascading Style Sheets is going to be the new standard. Although most web pages are still designed using tables, it is good to know how to put together a basic layout using CSS. A basic layout is fairly easy to create and is now guaranteed support from all of the stylesheet conscious browsers. Another good benefit from using CSS for layout is that the layout information is usually kept separate from the content, so instead of a search engine reading table layout code, it can focus on reading your content. So CSS layout is what we will do in today's tutorial.

We will use a somewhat standard layout with:

A Title Bar along the top with links underneath
A left Navigational panel with more links
A content area to the right of the navigational panel

Also, our layout will be fluid, which means it will resize as the browser window resizes. (I will show the basic html page for this and the finished CSS page in separate links).

So, we will first type in the html for our Title Bar.

Type the following (which will create an XML compatible XHTML file) into any text editor

<?xml version="1.0" encoding="UTF-8"?>        
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en">

<head>
<title>CSS layout tutorial 01</title>
</head>

<body>

<h1>This is the Top Level Heading</h1>
<p><a href="#">Link One</a>
<a href="#">Link Two</a>
<a href="#">Link Three</a>
<a href="#">Link Four</a>
<a href="#">Link Five</a>
<a href="#">Link Six</a>
</p>

</body>
</html>

Save As an ASCII text file

The above created an </h1> heading and six horizontal links. We won't make the links an unordered list (to be formatted into a horizontal list with CSS) to keep this lesson simple. Instead, we'll put all of these links into a paragraph.

Now, create the left Navigational panel.

Type the following just below the last </p> tag in the previous html code:

<h3>Left Navigational Panel</h3>
<ul>
<li><a href="#">More Links Seven</a></li>
<li><a href="#">More Links Eight</a></li>
<li><a href="#">More Links Nine</a></li>
<li><a href="#">More Links Ten</a></li>
<li><a href="#">More Links Eleven</a></li>
<li><a href="#">More Links Twelve</a></li>
</ul>

And, finally we type in our content layer.

In this case, I just copied and pasted some text from this tutorial and repeated it. Type the following just after the last </ul> tag in our code:

<h3>This is the content</h3>
<p>Our layout will be fluid, which means it will 
resize as the browser window resizes. Our layout will 
be fluid, which means it will resize as the browser 
window resizes. Our layout will be fluid, which means 
it will resize as the browser window resizes. Our
layout will be fluid, which means it will resize 
as the browser window resizes.</p>

<p>Our layout will be fluid, which means it will 
resize as the browser window resizes. Our layout will 
be fluid, which means it will resize as the browser 
window resizes. our layout will be fluid, which means 
it will resize as the browser window resizes. Our 
layout will be fluid, which means it will resize as 
the browser window resizes.</p>

Notice from our typed html that our content goes in a linear fashion from top to bottom.

Check out our html thus far.

For the rest of the tutorial, we will go to the next page.
Go back to the Tutorials main page.