Category Archives: web designing


The internet in simple terms is a network of the interlinked computer networking worldwide, which is accessible to the general public. These interconnected computers work by transmitting data through a special type of packet switching which is known as the IP or the internet protocol.

Internet is such a huge network of several different interlinked networks relating to the business, government, academic, and even smaller domestic networks, therefore internet is known as the network of all the other networks. These networks enable the internet to be used for various important functions which include the several means of communications like the file transfer, the online chat and even the sharing of the documents and web sites on the WWW, or the World Wide Web.

It is always mistaken said that the internet and the World Wide Web are both the same terms, or are synonymous. Actually there is a very significant difference between the two which has to be clear to understand both the terms. The internet and World Wide Web are both the networks yet; the internet is the network of the several different computers which are connected through the linkage of the accessories like the copper wires, the fiber optics and even the latest wireless connections. However, the World Wide Web consists of the interlinked collection of the information and documents which are taken as the resource by the general public. These are then linked by the website URLs and the hyperlinks. Therefore World Wide Web is one of the services offered by the whole complicated and huge network of the

The use of IP in the Internet is the integral part of the network, as they provide the services of the internet, through different layers organization through the IP data packets. There are other protocols that are the sub-classes of the IP itself, like the TCP, and the HTTP.


Two column layout using html and css

There are many ways to create a two column layout using Cascading Style Sheets (CSS). This article takes you through the steps of using one method. The code given here will also allow you to add an optional header and footer that spans both columns to your pages should you wish.


For you to be able to use this article, you need to be able to code directly in both html and css. If this is not the case, you may prefer to use a visual web editor to design your site instead. For example, Dreamweaver comes with numerous templates to build 2 or 3 column websites using CSS. through dream weaver takes you through the steps of creating a CSS-based two column website with this editor.

Note that you do not have to be an expert in writing HTML or CSS code. You just need some basic working knowledge otherwise this tutorial will be incomprehensible.

Using Float to Define 2 Columns

While there are many methods of using CSS to create a two-column site, this tutorial uses the float property to move one column to the side of another. In some ways, this method is more flexible than the absolute positioning method currently used on It also allows you to add optional header and footer bars that span both columns if you wish.


The two-column CSS given here has been tested to work on Internet Explorer 6 and 7, Firefox, Opera, safari.

The HTML Code for a Basic 2 Column Website

The HTML part of the code is fairly simple. You basically need 2 div blocks, one for each column.

<div id="container">
  <div id="navbar">Navigation</div>
  <div id="content">Content here</div>

The words “Navigation” and “Content here” are merely placeholders for the navigation side bar and main content. You should remove those words when you put your real content. The “container” div block is merely a block enclosing both the two columns, and is useful if you want to apply certain styles that affect both columns as a unit.

The CSS Code for a Basic 2 Column Website Using a Fluid or Liquid Layout (Relative Widths)

If you want a website where your page widths expand or contract according to how large your visitor’s browser window is, you should use relative widths for your columns. At the time I write this, uses such a fluid layout for its right column as well. For example, if you change the size of your browser window, your browser will reformat the article column as far as possible to fit within the window (unless you resize it too small).

The CSS code for this is simple.

#content {
  margin-left:  20%;
#navbar {
  float: left;
  width: 20%;

The CSS code has to go either into the style section of your web page or an external style sheet. Here’s how to customize the code:

  1. Changing the Width

    The above style sets the side column for your navigation bar to 20% of the width of the browser window. Consequently, the left margin of the column containing your content is also set to start at 20% from the left edge of the browser window, otherwise your content will overlap with your navigation bar.
    If you prefer that the width of the side column be wider or narrower, just change both the margin-left and width properties to the same value.

    You can also use pixels for the width instead of a percentage. For example, to constrain your navigation bar column to 200 pixels, change each of the 20% values to 200px instead. The use of pixels is useful if you have a picture (such as a logo) that you want to place in the side column and don’t want the column to be narrower than your image.

  2. How to Put the Navigation Bar on the Right

    The code above puts the navigation menu in the left column, just like what you see on this page. If you prefer that the navigation menu be on the right, as is commonly found in blogs, change the code so that it looks like the following:

    #content {
      margin-right: 20% ;
    #navbar {
      float: right ;
      width: 20% ;

    Again, change “20%” to a value appropriate for your site.

The CSS Code for a Basic 2 Column Website Using a Fixed Layout

Although, at this point in time, I still use a relative width layout, or liquid layout as some people like to call it, the disadvantages that I mentioned in my article the great fixed versus relative width page layout debate are becoming more acute with the huge monitor resolutions that are now available. That is, if your visitors use a monitor that displays (say) over 2000 pixels horizontally, your paragraphs will be reduced to single lines swimming in an ocean of white space. This happens when the width is so wide that the entire paragraph can fit into one line.

As a result, some people prefer to fix the width of their window to some reasonable value, like 800 pixels or 1024 pixels. To use such a fixed layout for your site, set a width for the block containing both columns. Here’s where the empty container DIV that you created earlier comes in useful.

The following CSS code creates a page with a fixed width of 800 pixels.

#container {
  width: 800px ;
#content {
  margin-left:  200px;
#navbar {
  float: left;
  width: 200px;

However, if you do the above, and your site appears in a browser window wider than 800 pixels, you will find that both your columns will be flushed to the left of the window, leaving a sea of white space on the right of the screen. What you want, in such a case, is for both of your columns to be centred in the browser window.

The standards-compliant way of centering a block is given below:

#container {
  width: 800px ;
  margin-left: auto ;
  margin-right: auto ;

For this code to work in IE 6 and 7, you must have a valid Document Type Definition (“DTD”), or DOCTYPE, for your web page to avoid triggering IE 6/7’s backward-compatibility mode (also known as Quirks mode to most webmasters). For example, the HTML 4.01 transitional DTD is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

The left and right margins are set to auto which causes standards-compliant browsers to give them both an equal value, effectively centering the block.

How to Put a Top Header or a Footer Spanning Both Columns on a 2 Column Site

Some sites have a top header spanning both columns. They may either place the site’s logo or name here, or, perhaps even banner advertisements or both. In the same way, some sites also include a footer that span both columns. Among other things, the footer may be used for things like copyright notices.

To use a header and footer using this 2-column layout, modify your HTML code as follows.

<div id="layout">
  <div id="header">Top Header</div>
  <div id="navbar">Navigation</div>
  <div id="content">Content here</div>
  <div id="footer">Bottom Footer</div>

Add the following CSS code to your existing style sheet. Simply place it after the styles you created above.

#footer {
	clear: both ;

If you want the text in your header to be centred, add the following. Otherwise, there’s no need to define a header style.

#header {
	text-align: center ;

The same text-align property can be added to the footer to centre the text there as well, if you wish.

Miscellaneous Matters
  1. Top Line Alignment Issues

    You will probably find that IE 6 and 7 do not align the top lines of your left and right columns in the same way as all the other browsers. If your site design happens to be alignment-sensitive, you may want to use the conditional includes described in the article How to Use Different CSS Style Sheets For Different Browsers (and How to Hide CSS Code from Older Browsers) to position your text specifically for those browsers. It’s best to specifically position the code for IE 6 and 7 alone (and not all IE versions), since IE 8 and above are actually CSS standards compliant, so if you position it for all IE versions, your site design will break in the modern IE versions.

  2. Text and Graphics Go Right to the Edge

    The code given above merely provides the basic layout. As it stands, your text and graphics will go right to the edge of each column. One way to make some space between the text and the edges is to add the following property to your content, navbar, header and footer DIV selectors.

    padding: 4px ;

    The exact width of the padding is of course up to you. The 4px given here is just an example