Computer Programming web Web programming Tips



Simple CSS Three Columns Page Layout

By Sergey Skudaev

Happy Amazon Prime Day July 12 - Exclusive Deals for Prime Members - Start Free 30-Day Trial

Introduction

Here is a simple example of using a separate CSS file for html or php page layout. I prefer to use separate css file, because it controls layout and style for all your pages. If you want to change something you do not have to edit every page on your site. Instead, you edit only one style.css file. Probably, you can find on Internet a better example, so I encourage you do that later. Now I want you to try this example to feel all advantages of CSS layout vs. tables layout.

I used absolute positioning for blocks of the page. What you have to understand about absolute positioning is that a block with an absolute positioning is positioning itself relating to its parent block that have positioning. In my case the logo, the left menu and the right banner blocks are positioning themselves relatively to the page block. If the page block did not have position, then all its children blocks were positioning themselves relatively to the browser window. You can delete "position:absolute;" line from the page block and see the difference.

A page with absolute block positioning is rigit and is not adjust itself to fit the screen if user change screen resolution. It is a disadvantage of absolute positioning. It advantage is that it is supported by all browsers. Floting blocks make a page layout more adjustable, but not all browser display floating block in the same way. I will give you floating block layout in another example.





Let us imagine that our web page has a logo and a title at the top of the page and three columns as the graphics above. So we have to reserve space a horizontal rectangle 800px X 100px at the top of the page. In style.css file copy and paste the following logo <div> definition:

#logo{
     position: absolute;
     top: 10px;
     left: 20px;
     width: 800px;
     background-color: #33FFFF;
     border-style: solid;
     border-color: #336699;
   }

Where logo is div id. Top is a distance from top edge of the page in pixels. Left is a distance from left edge of the page in pixels. Width is rectangle width in pixels. Background color is defined by a hexadecimal number.

000000 is for black color
FFFFFF is for white color
FF0000 is for red color
00FF00 is for green color
0000FF is for blue color.
The whole color palette code you can find on internet.

Okay, let us continue to design web page:
Our page has a menu, a vertical rectangle 150px wide on the left of the page. It should start just below the logo rectangle, so its top coordinate must be a little greater than 100px. Copy and paste in your style.css file definitions for the menu <div> rectangle

#left_menu {
      position: absolute;
        top: 115px;
         left: 10px;
         width: 150px;
         background-color: #336699;
         border-style: solid;
         border-color: #336699;
  }
  

You can play with coordinates and color to select the best result.

On the right side of the page we place a vertical banner 150px x 400px from an affiliated program. Copy and paste in style.css file definitions for the banner rectangle.

 #right_banner {
     position: absolute
     top: 115px;
     left: 680px;
     width: 150px;
     background-color: #CCFFCC;
     border-style: solid;
     border-color: #336699;
    }

I do not define height of the rectangle because, depending on page length, we can place more than one banner.

Between left menu and right banner, goes page contents rectangle. A web page is about 800px wide or greater depending on screen resolution. The width of the page contents must be 500px - 600px. ( 800px - 150px left menu - 150px banner = 500px ).

Copy and paste in style.css the definitions for page <div> rectangle:

#page {
     position: absolute;
     top: 115px;
     left: 170px;
     width: 500px;
     background-color: #FFFFFF;
     border-style: solid;
     border-color: #336699
   }

Our style.css file for layout is complete. Now add definitions for the rest elements of web page. For example, headings and links. Please copy and paste in style.css file the following text.

h1 { font-size: 25px; margin-left: -8%;}
h2, h3, h4, h5, h6 {font-size: 15px; margin-left: -4%; }

a.menu  { font-family: arial, helvetica, sans-serif; color: #ffffff; font-size: 10px; font-weight:bold; text-decoration: none; }
a.menu:link { font-family: arial, helvetica, sans-serif; color: #ffffff; font-size: 10px; font-weight:bold; text-decoration: none; }
a.menu:visited { font-family: arial, helvetica, sans-serif; color:  #ffffff; font-size: 10px; font-weight:bold; text-decoration: none; }
a.menu:hover 	 { font-family: arial, helvetica, sans-serif; color: #ffffff; font-size: 10px; font-weight:bold; text-decoration: underline; }

Since menu background color is dark, we can use white font color for link text. You can play with colors.

Now to create HTML template as follow:

<!DOCTYPE html>
<html lang="en"> <html> <head> <title>CSS style example</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="logo"> <p>Logo goes here;Logo goes here; Logo goes here; Logo goes here; Logo goes here; </p> </div> <div id="left_menu"> <p> left menu goes here; left menu goes here; </p> </div> <div id="page"> <p> Main page body goes here; Main page body goes here; Main page body goes here; Main </p> </div> <div id="right_banner"> <p>Right side banner goes here; Main page body goes here;</p> </div> </body> </html>

The first line:

<!DOCTYPE html>
<html lang="en">

is very important because it tells what document type your HTML page is. Search engine robots visiting you page will know document type and it helps them to crawl the page.

The line: <link rel="stylesheet" href="style.css" type="text/css"> defines what file to use to read CSS style.

It is wise to validate your css page. Go to W3C CSS Validator and enter the URI of a document (HTML with CSS or CSS only) you would like to validate

Validate your HTML or XHTML as well: W3C HTML Valodator

Analyze time required to view your page. websiteoptimization.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 weak?
 
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

My eBooks on Amazon.com

Learn C++ Programming By Examples

Learn SQL Programming By Examples

Learn PHP Programming by Examples

Visual Basic Programming By Examples

How to Build Your Own Web Site from Scratch