1. Computing

Discuss in my forum

Entry 1 by Salman Arshad

Share Your Story: HTML and Web Design Challenge #1

By Salman Arshad

Entry 1 by Salman Arshad

Nine-One-One... Need Code, Help!

Title of Your Web Page

Nine-One-One... Need Code, Help!

What I Did:

I recently upgraded my blogger blog from two column to three column layout by using CSS that I hand-edited myself. The layout is fixed 980px wide that fits nicely in browser window for resolutions 1024px and higher.

The columns are also fixed width and they are distributed as follows:

* 640px

* 10px gutter

* 160px

* 160px

* 10px gutter

This layout results in reasonably wide column for content plus two sidebars capable of holding ads that are up to 160px wide.

The revised layout is tested in Firefox 2+, IE7+ and Google Chrome 3+.

What was the easiest thing about this?

Once you understand how floated DIVs behave, things become a lot easier. Remember that floated DIVs do not have any width and height of their own. In my case I specified a width for each of my columns and left the height to be determined by the content.

Cleared BR tags helped a lot.

Advice

  • IE has a mind of its own. As there are many people who still use IE, always test on IE7 even if your layout looks OK in other browsers.
  • Cleared BR tag is your friend. Use it wisely and things will work out fine.
  • Use layout inspectors to see how your DIVs behave. You can use Firebug extension for Firefox. Google chrome has this functionality built in.

©2014 About.com. All rights reserved.