|
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 div, we can make it appear so. This is exactly the method used at http://www.ecpgroup.net.
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 |
