Free Articles, Free Web Content, Reprint Articles
Sunday, February 17, 2019
 
Free Articles, Free Web Content, Reprint ArticlesRegisterAll CategoriesTop AuthorsSubmit Article (Article Submission)ContactSubscribe Free Articles, Free Web Content, Reprint Articles
 

How to Create Columns with Div's

When we at ... Partners ... started using divís rather than table for web page layout, the most daunting ... for me was how to create columns using divís.

When we at Ecommerce Partners (http://www.ecommercepartners.net) started using divís rather than table for web page layout, the most daunting experience for me was how to create columns using divís. So, here is the solution for all those website developers who are struggling to use divís for web page layout.

The div tag can be defined as the division in a web page. It is a block level element. This implies that the default behavior of divís is to stack up one above the other. This serves the purpose of using divís for a simple web page layout where all the elements stack one above the other. When we have a columnar web page layout (which happens to be the most common layout for majority of the websites), we need to know how to use divís to create two or more columns 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}
(in order to display it right on a browser "{" has been used in place of "<" in the above example)

Now, in the stylesheet declare the following rules.
#div1 { float:left; width:50%;}
#div2 { marging-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 http://www.ecpgroup.net. Here, background image (http://www.ecpgroup.net/images/content_bg.gif) has been used in the container div that holds the body and the footer of 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}
(in order to display it right on a browser "{" has been used in place of "<" in the above example)

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 { marging-left:50%; width:50%;}

The result will be the appearance of two columnar divís expanding vertically equal to each other. So, although we cannot extend a div vertically equal to another divFree Web Content, we can make it appear so. This is exactly the method used at http://www.ecpgroup.net.

Source: Free Articles from ArticlesFactory.com

ABOUT THE AUTHOR


Shruti Gupta works for ECommerce Partners.net (http://www.ecommercepartners.net) - a website design company in New York. We pride ourselves in developing search engine friendly and standard compliant websites. Email: info@ecommercepartners.net



Health
Business
Finance
Travel
Technology
Home Repair
Computers
Marketing
Autos
Family
Entertainment
Law
Education
Communication
Other
Sports
ECommerce
Home Business
Self Help
Internet
Partners


Page loaded in 0.043 seconds