Computer Programming web Web programming Tips



CSS Positioning - 3 Columns Float Layout

By Sergey Skudaev

Before we start discussing CSS positioning details to come up with 3 columns web page layout I want to show you the anatomy of a web page. Any web page should start with document type declaration:


<!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" lang="en-US" xml:lang="en-US">

Document type can be HTML or XHTML and if it is HTML it can be HTML 4 or 5.

After declaration of the document type goes page itself starting with <html> tag and then with <head> tag.


<html>
<head>
<title>CSS style example</title>







Inside the head of the page goes <title> and </title> tags between which a page title is placed. A page title is very important for search engines use it to determine a topic of the page. They use other page attributes as well, but a title is one of the most important attributes and you have to choose a very catchy and precise title and yet make sure that many interned visitors use such words in their search query. Google keywords page let you find out answer to that question.

After title tag, meta tags are located. The description tag is a very important one. Google displays page description in the search result under a page title. You can see it on my screen shot below.

Visitors may be attracted by your well written description and visit your page or ignore it even if the page is found by Google.


<meta name="description" content="How to use CSS style for 3 columns web page layout. Float positioning example. Anatomy of web page"/>
<meta name="keywords" content=" "/>
<meta name="owner" content="Serge Skudaev"/>
<meta name="author" content="Sergey Skudaev"/>
<meta http-equiv="content-language" content="eng-US"/>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
<meta name="robots" content="index, follow"/>

A keyword tag includes keywords. Select few phrases that are present in your title, description and main text. A language tag and charset tag show browser what language and character set you use on the page. For English language use "ISO-8859-1" character set. For Russian use charset=windows-1251.

Robots tag allows you to control your web page access by search engine robots. When your page is in construction stage, set content to "noindex, nofollow". When the page is ready, change it to allow access.

After meta tags, links to css style files and links to javascript files are located. These links allow to include css or js files in your web page. You can declare css style on local page, but having separate css file for all pages allows you to change css style all pages at once instead of editing each web page. You may have few css files; one for layout and one for colors and fonts.


<link href="style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/cycle.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
</head>

After head part of the page <body> tag is located. The body tag contains a page area that is seen by a visitor. Usually, that visible part of a web page is comprised of few blocks: a header or logo, a left margin, a right margin, a central (main) area and a footer. A CSS style file allows you to create such page layout. Alternatively, you can use table layout, that is considered as an old way of web design.

I use css style blocks for page layout. An illustration of my page layout example is displayed on picture below:

In my example, a yellow block is the body. Inside the "body" block I placed a "page" block 950 pixels wide. The "page" block is centered on the "body" block and holds together all other blocks. To get the "page" block centered you have to set its left and right margins to auto.

At the top of the "page" block, I placed a "header" block. Under the "header" block, I placed a "content" block and under the "content" block I placed a "footer" block.

Inside the "content" block I placed a "left" and a "right" floating blocks 160 pixels wide. Between the "left" and the "right" blocks I placed a "middle" block without width, so that depending on screen resolution the width of the middle block may vary.

HTML script for body tag is shown below.








<body>
<div id="page">
     div id="header">

     /div>

     div id="content">
     div id="left">

     /div>

     div id="right">


     /div>

     div id="middle">

     /div>
     /div>

     div id="footer">

     /div>
</div>

</body>>

</html>>

The whole example you can download here

My eBooks on Amazon.com



Subscribe to our mail list to receive free code examples.

Comments

No comments yet.

Add Comment

* Required information
(never displayed)
 
Smile Sad Huh Laugh Mad Tongue Crying Grin Wink Scared Cool Sleep Blush Unsure Shocked
 
1000
What is the opposite word of small?
 
Enter answer:
Captcha
Refresh
 
Enter code:
 
Notify me of new comments via email.
 
Remember my form inputs on this computer.
 
I have read and understand the privacy policy. *
 
I have read and agree to the terms and conditions. *
 
 
Powered by Commentics