Simple CSS layout

Designing a simple website layout using CSS

Last updated on December 15, 2009. Tags: CSS layout, tableless web page layout

In this tutorial, I will teach you how to make a simple two-column website layout using CSS. The width and height of both columns are constants.

It is unlikely that you will use such rigid layout when you develop your own website (except maybe the home page). However, we need to understand first how the block elements (header, footer, sidebar, content area, etc.) position themselves before we can understand how these elements expand or contract based on the amount of content.

The first step in creating a website layout is to decide the number of block elements that we need. In this tutorial, we will do a typical two-column layout made-up of four parts: header, menu column (or sidebar), content column (or content area) and footer as shown in the figure below.

Typical two column layout with menu on the left and content on the right.

Next, we create an html document that has five div tags. Four of these div tags correspond to the four block elements (four parts) that we mentioned earlier, while the fifth div tag, called the "wrapper" serves as a container to restrict the block elements to a certain width so that the layout will be consistent regardless of the viewer's monitor width. Your html should look like the one below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<head>

<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />

<title>Test Page for CSS Layout</title>

<head profile="http://gmpg.org/xfn/11">

<body>

<div id="wrapper">
	<div id="header">
 	This is the header
 	</div>
 	<div id="left-menu">

 	Links within the site goes in this menu.
 	</div>

 	<div id="right-content">
 	This is where we can see the main content.
 	</div>
 	<div id="footer">
 	This is the footer.
 	</div>

</div>

With this html code, your webpage would simply look like this.

Initial appearance of a website without CSS

As you can see, div tags pretty much act like paragraph tags "<p>". The "div" stands for division, and it defines the various divisions or block elements that constitute the website layout. The default setting in both Internet Explorer and Firefox are:

Each division is made of only one line except if the paragraph has more words than how much the width of the division can accommodate, or if the division contains an image taller than the letters. In the former case, the words that exceeded the width of the division go to the next line just like in paragraph tag.
Two or more adjacent divisions are always arranged in vertical order; one is on top of another.
Divisions have no margins, no borders and have transparent backgrounds, making it difficult to tell if a page has divisions unless you check the codes.

Thanks to CSS, now we can modify these block elements (as defined by divisions) in several different ways. We can put borders and backgrounds, change their sizes and shapes, and position them anywhere we want on the page.

We can do this by inserting a new code in the head section of the html that calls an external CSS file style.css. Note that you can name the external CSS file with any name that you want. Your header should now look like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Page for CSS Layout</title>
<link type="text/css" rel="stylesheet" media="screen" href="style.css">

</head>

This external CSS file shall control the characteristics of each part. We can create this CSS file by simply creating a text file and change the extension name from txt to css.

To do this, you should enable the view extension name in your operating system. You can also use Dreamweaver or Front Page Express to create CSS file. However, I would encourage you to use the HTML mode instead of the WYSIWYG mode to design a webpage if you truly want to learn and understand how HTML and CSS work.

The external CSS file (style.css or whatever name you want for it) is initially blank, and can be edited using notepad, Dreamweaver or Front Page. Now, let us check the HTML code again. Notice the id="whatever" inside the div tags?

These are called IDs (as in I.D., like how you pronounce that thing that you show to the security guard when entering your office or school). You can name IDs with any name that you want, but it will help if your IDs are descriptive, like "header" for header, "left-menu" for the menu portion located at the left, "right-content" for the portion that will contain the main content, and "footer" for footer.

We will define each ID in the CSS file. The IDs in the html code simply points the block element to the appropriate ID in the CSS file. Open your CSS file, paste the code below, and then save.

body {
	background: #ffffff;
	margin: 0;
	padding: 0;
}

#wrapper {
	width: 700px;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	background: #dddddd;
}

#header {
	width: 700px;
	height: 100px;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	background: #ffccff;
}

#left-menu {
	width: 200px;
	height: 300px;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	background: #ffff99;
	text-align: center;
}

#right-content {
	width: 500px;
	height: 300px;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	background: #c0c0c0;
}

#footer {
	width: 700px;
	height: 70px;
	margin: 0;
	padding: 0;
        border: 0;
        float: left;
        background: #ccff99;
}

Notice that each ID starts with number sign (#) in the CSS. After inserting this code into your CSS file. Open or refresh your HTML file (the actual webpage). It should now look like the image below. Click on the image to see the actual webpage.

At this point, our layout is already finished. This is the layout that we want to achieve. In the succeeding steps, we will be merely experimenting or testing the attributes of the divisions (as defined by the div tags and IDs) to gain a better understanding on how each attribute contribute to the overall design.

Width and height

The width and height represents the horizontal and vertical dimensions of the division respectively. For example, the division "right-content" has width and height of 500 px and 300 px respectively (px means pixels). Other possible units are em, % (percent), cm (centimeters) and in (inches). For the purpose of this article, we shall stick to pixels.

If either width or height is not defined, the default setting for both Internet Explorer and Firefox is that the division expands automatically to accommodate the content of that division. To see this effect, open the CSS file, highlight the width:700px; under #footer, press delete key (you need to delete it this way especially if you are using notepad as CSS editor because in notepad, ctrl + z works only one step backward) and then save.

Then, reload your html file. It should now look something like this.

Appearance of a website with CSS if width attribute is deleted

Notice the light gray area on the bottom right corner? That light gray color, represented in HTML as #dddddd is the background color of the wrapper. Earlier, the wrapper is totally blocked by the four other block elements because the width of both the header and the footer is 700 pixels, while the combined width of left-menu and right-content is (200 px + 500 px) is also 700 pixels. Hence, the entire 700-pixel width of the wrapper is covered.

As for the height, the wrapper has no defined height; hence, it expands only to accommodate its content, the four other block elements. This also prevents us from seeing any part of the wrapper. Now that the width of the footer has been shrinked, we can see a part of the wrapper that is not occupied by any block element. Press ctrl + z and then save, to return the webpage to its original layout.

Try experimenting on your own by repeating the same process with the width or height of other block elements to see by yourself how width and height affects the layout. Before you start experimenting, save a separate copy of the CSS file. After each test, return to the original design by pressing ctrl + z or by copying the CSS codes from the separate file you copied earlier.

Background

The background refers to what can be seen at the back of texts and embedded objects. It can be a color or an image. It is one of the fundamental properties that exist since the earliest webpages. A background can be set for the entire page and for each individual block element on the page. We can try testing how the page behaves if the background property is not defined.

Again, open your css file. Then, highlight the background: #c0c0c0; under #right-content, press delete key, and then save. You will notice that the background became light gray (#dddddd). This color background is the background of the wrapper.

You will also notice that the right-content block element, in the absence of background attribute, becomes transparent. This is the default behavior for Internet Explorer and Firefox, but I am not sure for other browsers. If your intention is to really make a transparent background, it would be better if you define it as "background: transparent;".

Float

The float attribute is used to place the block elements side by side. Without the float attributes, the block elements would simply arrange in a way that one is on top of the other as shown in the illustration below.

Apperance of a website without float attribute

The float attribute enables the parts within the wrapper to behave in a way similar to the characters that are aligned left in a webpage or word processor. The words in a word processor tend to fill one entire line of space. If a word can still fit in the remaining space at the end of that line, then that word becomes the last word for that line. If the word is too long, the word goes to the next line while the end of the previous line has a vacant space.

This is how the block elements behaved within the wrapper. Since the wrapper can accommodate only block elements with 700-pixel width, and the header has width of exactly 700 pixels, the next block element, which is the left-menu, goes to the next line.

Since the left-menu has only 200-pixel width, there is a space of 500 pixels on its right. This remaining space can accommodate the right-content, which has exactly 500 pixels in width. Finally, since the footer has width of exactly 700 pixels, it can no longer fit on the side of right-content, hence, it automatically goes to the next line.

You can experiment on the behavior of float by changing the width of the block elements in the CSS file. For example, try to change the width of the header to 400 pixels. You will notice that the left-menu division went-up to occupy the vacant space of 300 pixels. Since the left-menu is only 300 pixel in width, there is still a vacant space with width of 100 pixels.

Since we intend the header to be on top of all other block elements, the float attribute is not necessary. The natural behavior of the block elements in the absence of float attribute is to arrange themselves vertically. Theoretically, the same should be true to the footer tag, but for some reasons I could not determine, Internet Explorer and Firefox interpret this differently.

In Internet Explorer, the footer block element appears the same whether or not the float attribute is present. On the other hand, in Firefox, the content of the footer is still there but is now imposed on the background of the body of the page itself. The block with light green background that corresponds to the footer block element is not visible.

In cases like this, it is best to go for the code that would make it appear similar to what we want in both Internet Explorer and Firefox; it is by defining the float attribute for the footer. Anyway, the mere fact that the footer has width of 700 pixels ensures that it will be not on the same row as the left-menu and right-content block elements.

Aside from ‘left', another possible attribute of float is ‘right'. In this case, we can use float: right; to align the parts of the layout to the right. If one division comes first before the other in the HTML code, that division will be the one located on the right.

In the picture below, the menu, content and footer divisions are all aligned to the right due to float: right; in their sections in the CSS file. The menu is on the right because it comes first before the content in the HTML code. If the footer is not exactly 700 pixels, the fact that it is aligned to the right will be more noticeable.

Apperance of a website with float: right; attribute

Note that the all block elements that we use in this tutorial have exact dimensions e.g., a 700-pixel width footer fits perfectly in a 700-pixel width wrapper. It works only because we set the margin and padding for all divisions to be zero (margin: 0; padding: 0;). If these attributes are not zero, we need to adjust some parameters.

If you need a website layout that automatically expands vertically based on the amount of content, you can check this tutorial: Fixed-width two-column CSS layout

Posted by Greten on October 18, 2008 under Cascading Stylesheet (CSS)

Share and Enjoy: