How To Create Columns With Div's

When we at Ecommerce Partners started using div's rather thantable for web page layout, the most daunting experience for me was howto create columns using div's. So, here is the solution for all thosewebsite developers who are struggling to use div's for web page layout.

The <div> tag can be defined as the division in a webpage. It is a block level element. This implies that the defaultbehavior of div's is to stack up one above the other. This serves thepurpose of using div's for a simple web page layout where all theelements stack one above the other. When we have a columnar web pagelayout (which happens to be the most common layout for majority of thewebsites), we need to know how to use div's to create two or morecolumns in a web page.

The following method will cause div's to stack up side by side rather than one above the other.

Let's say that we have two div's:

<div id="div1"></div>
<div id="div2"></div>

Now, in the stylesheet declare the following rules.

#div1 { float:left; width:50%;}
#div2 { margin-left:50%; width:50%;}

The result will be two columnar div's. You may use this method to create as many columns as needed on the web page.

Now, if you need these two columnar div's to expand vertically equal to each other you can use the following method.

First create a background image that if tiled vertically will look like two columns. For reference, please visit Ecpgroup.net.Here, background image has been used in the container div that holds the body and the footerof the web page.

This background image must be 1 pixel high and as wide as the container that contains all the elements of your web page.

In the html document:

<div id="container">
<div id="div1"></div>
<div id="div2"></div>
</div>

Declare the following rules in the stylesheet:

#container { background: url(the_Url_Of_The_Background_Image.gif) repeat-y 0% 0%; }
#div1 { float:left; width:50%;}
#div2 { margin-left:50%; width:50%;}

The result will be the appearance of two columnar div'sexpanding vertically equal to each other. So, although we cannot extenda div vertically equal to another div, we can make it appear so. Thisis exactly the method used at Ecpgroup.net.

About the Author:

Shruti Gupta works for ECommerce Partners.net (Ecommercepartners.net) - a website design company in New York. Her life revolves around developing search engine friendly websites. Email:info@ecommercepartners.net.

How to Make your Web Design Interactive
The importance of effective website design can never be undermined. Right from having the potential to attract new customers to getting you more sales, a good quality and attractive web design is something that can mean the difference between a no sale and an actual purchase!
MySQL Join Tutorial
What are joins and how do you make them?
ASP.NET in Dreamweaver 8
In this article you will be able to use the new features of dreamweaver 8 to connect to a SQL database and return the results to a datagrid.
Making a 3 Column Fluid Layout With CSS
3 Column CSS Layouts always seem to be the most sought-after by web designers. To create a layout with three columns, including two fixed width sidebars and a fluid center and not using tables seems to be, as A List Aparts Matthew Levine put it, The Holy Grail in his article on this.
PHP News CMS
Check out this great tutorial to find out all the details of Content Management Systems (CMS). Everything you need to know is right here.
Fundamentals of SEO - One Page Per Keyword
Would you like to get more traffic from your business website? Its a rhetorical question, of course, because we all want more traffic for our websites. Its the first step to Internet marketing success.
Liquid VS Fixed Layout Debate In Modern Web Design
This very informative article will help you to understand the continued comparison of benefits and liabilities of Liquid VS Fixed Layout. The author explains when a mixed approach works best.
3 Quick Tips To Improve Your Homepage
Everyone who has a website struggles at one time or another with how to improve their home page. Although many visitors enter through pages deeper in your site, your home page is often a visitors first introduction to your company or organization. For that reason, its important to start off on t.....
3 Tips On Using Contrast
If you have a website, it needs to grab attention. You have to catch a visitors interest and make him or her want to delve into your site. Otherwise, the site wont do you much good, no matter how much traffic youre getting. If visitors land on a page that is visually uninteresting, you will...
Free Traffic Course - Day 7
When you work with web site traffic, you must have the tools that show you the real picture about this traffic. You must know for sure how targeted your visitors are, what they want, what offers they like more, what offers cut down their motivation to use your product/service...