How to Create Columns with Div’s?
When I 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>
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 or use min-height.
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>
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’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.
No related posts.
Tags: CSS, HTML/XHTML, Website Development
[...] Majority of the web page layout require side navigation column and the content column to expand vertically equal. This can be a challenge when we prefer to use div rather than tables for layout. I explained one of the most useful hacks that create an appearance of two columnar div’s expanding vertically equal to each other. However, there are times when we actually want both the columns to have equal height. The solution can be min-height – a very helpful CSS property. However, it doesn’t work in IE. It works in FireFox. [...]
Thank you so much for this article.
I’ve been searching for a proper solution and hey, this is smart!
Thanks this article helps me a lot..Thanks Again
Thanks for this good article
Works while right column is same height or taller than left column. On Firefox, if left column is taller it extends below container div.
ohh, at last, somebody has taken those divs in order, thanks, simple and clever
But how can i make 3×3 divs structure in order with css?
Quick question,
Is it possible to have a div table, based on the above, to act and behave like an html table? For example, i want to resize the screen, using the bottom right-hand “resize option” where we can click and drag.
Kool!! That was one of the simplest explanations ever. Thanks