Scribd
Upload
26 views

Basic Page Structure: Figure 1 - The Intended Design

The document describes setting up the basic page structure and layout for a website with three columns. It involves: 1. Creating a container <div> to hold the entire content area and position it within the browser window. 2. Adding inner <div> containers for the header, left column, center column, right column, and footer sections. 3. Applying basic CSS styles to remove margins/padding and add background colors for visual clarity. 4. Defining widths and floating the column containers to create a three column layout, and clearing the footer to return to the normal page flow.

Uploaded by

Pace Infotech
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
26 views

Basic Page Structure: Figure 1 - The Intended Design

The document describes setting up the basic page structure and layout for a website with three columns. It involves: 1. Creating a container <div> to hold the entire content area and position it within the browser window. 2. Adding inner <div> containers for the header, left column, center column, right column, and footer sections. 3. Applying basic CSS styles to remove margins/padding and add background colors for visual clarity. 4. Defining widths and floating the column containers to create a three column layout, and clearing the footer to return to the normal page flow.

Uploaded by

Pace Infotech
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Basic Page Structure

For this tutorial, we're targeting a layout that has three columns of content with spaces at the top
and bottom for a header and footer. The page will be a fixed width and will also be centered in
the browser's display area (Figure 1).

Attachments:

Figure 1 - The intended design.

We'll begin with an XHTML page structure in its most simple form. In the <head> of our document, we'll
point to an external CSS file.

<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
</body>
</html>

Creating the Containers in the Markup


The first <div> we're going to create within the <body> of this page will contain the entire content area.
This allows us to position our layout within the display area wherever we want. We'll give this, and all
containers, a unique identity using the "id" attribute of the <div> element.
<body>
<div id="page_container"></div>
</body>

Now, within our "page_container", we'll add containers for the specific content areas that we
mentioned before. Again, we'll identify each uniquely.

<body>
<div id="page_container">
<div id="header"></div>
<div id="left_column"></div>
<div id="center_column"></div>
<div id="right_column"></div>
<div id="footer"></div>
</div>
</body>

At this point, if we were to render this document, we would not be able to see anything. Let's add some
dummy content so that we can see what's happening. We'll use a typical scheme for structuring
information including titles, sub-titles, paragraphs and a menu.

<body>
<div id="page_container">
<div id="header">
<h1>My Web Site</h1>
</div>
<div id="left_column">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
<div id="center_column">
<h2>My Document</h2>
<p>Vivamus elementum ligula gravida neque. Cras adipiscing ligula non turpis. Sed cursus
scelerisque libero. Sed at arcu. Vestibulum metus. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos hymenaeos. Phasellus id turpis. Sed purus. Integer eget ligula
elementum felis aliquet rhoncus. Morbi augue.</p>
</div>
<div id="right_column">
<h3>Sidebar</h3>
<p>Vivamus non urna eget nisi placerat vehicula. Vivamus semper molestie lacus. Proin a
tellus et massa placerat ultricies. Curabitur viverra convallis felis.</p>
</div>
<div id="footer">
<p>Copyright Information</p>
</div>
</div>
</body>

Our markup is now complete.

Adding Basic Styles


Let's create a basic set of selectors and definitions in our CSS file for the intrinsic HTML elements and for
each of the containers. We want to remove the inherent margining and padding from all elements,
remove the bullets from the <ul> that we're using for our menu, and allow for some simple background
colors in our content areas for visual clarity.

/* Intrinsic HTML Elements */


body{margin:0;padding:0;}
div{margin:0;padding:0;}
h1{margin:0;padding:0;}
h2{margin:0;padding:0;}
h3{margin:0;padding:0;}
p{margin:0;padding:0;}
ul{margin:0;padding:0;}
li{list-style-type:none;}

/* Uniquely Identified Containers */


#page_container{}
#header{background:#999;}
#left_column{background:#CCC;}
#center_column{background:#ECECEC;}
#right_column{background:#CCC;}
#footer{background:#999;}

With the HTML and CSS in place, our page should render as shown in Figure 2. Notice that our document
makes sense "semantically", similar to a document printed on paper. The web site has a title, there is a
menu/table-of-contents for the site, the page we're viewing within the site has a title, and there is a
clear heirarchy/structure for ancillary and tertiary information. The structure of this arrangement should
always be based on the needs of the site and/or page that's being created.

Adding More Styles - Widths, Floats, and Clear


First, let's define a width and position for our layout by adding definitions to our #page_container
selector in our CSS file. Again, nesting all the content in this overall container allows us a great deal of
flexibility.

#page_container{width:760px;margin:0 auto;}

Now we get into the crux of creating a "float" scheme. For each <div> that we are going to use as a
column, we'll add two definitions in our CSS, a width and a float.

Notice that the sum of the widths of these three elements is equal to the width of the #page_container
element.

#left_column{width:180px;float:left;background:#CCC;}
#center_column{width:400px;float:left;background:#ECECEC;}
#right_column{width:180px;float:left;background:#CCC;}

When we added these definitions, we altered the postions and widths of the columnar elements in the
render flow. To return to the normal render flow within the parent container, we'll need to "clear" the
next element from the effects of the "float".

#footer{clear:both;background:#999;}

Our three columns now line up from left to right and the longest column, in this case the right_column,
pushes the footer down the page, within the parent container (Figure 3).

You might also like