A new technique to solve div height issue
By:
admin 
Date Added:
Sunday 13-06-2010
If you have not made the switch from the table-design to the tables design, you should now. Even tough that table-less design seems hard to learn, particularly to those who are used to the tabular design it comes with many benefits. The first and the foremost benefit is the great control over the different parts of the website layout. Add to the that most search engines now (i.e Google :) ) favours websites with table-less layout since table layout is considered to be tabular data.
There are two layouts that are used commonly across website “the two columns” (figure 1) and “the three columns” (figure 2) layout. That is the content in the middle and menus on the sides.
Figure 1
Figure 2
The problem:
This layout, when using a table-less layout, comes with a downfall. If the contents container in the middle extends to be more than the side menus bars, the container of the side menus will not extend to the height of the contents. This will affect the appearance of the website. (figure 3)
Figure 3
The first solution that comes to one’s mind is to set the side menus bar’s height to be div {height: 100%}. Nonetheless, this solution is not sufficient since the div container does not have any thing to factor the height. To come over this issue you have to set all the parent containers to 100%.
Another solution is to use Faux Columns. In short this technique sets a background that extends over the contents container and the side menus bars (the author used an example of one side layout, but the concept can be applied to two sides) and then the background is repeated vertically. So the side menu bars will “appear” to be extending down the entire page while in fact it is the background of the contents container.
Even thought this method provides a nice cheat to the issue of div height it limits the designer with the options that he would have in terms of side menus container’s width and background repetition.
The solution:
An extra efficient solution exists, no matter how desperate is the problem. Using div position and stack order one can easily design a website layout that contains extendable side menus bars.
First we set up the layout with the style sheet:
Click here to see the layout in example 1.
To make the background stretches vertically to be as high as the longest div container we will create a duplicate of the div containers that we want to extend (with few changes) and their relevant CSS selectors (I will create one for each menu bar in this tutorial, but you can create a duplicate for any container you like).
I will add these selectors to the page head with simple change:
And I will also add these two divs to the page body and within the main-container div:
Click Here to see the end results in example 2.
You probably noticed that in example 2, the div containers that I have created are not extended within the parent div container. To solve this we add:
position: relative;
to the main-container selector. This will tell the browser to extend the new div containers within the main-container div.
Click here to see the new created containers in example 3.
In example 3 we notice that the new div we create are places over the original side menu bars. This were stack order comes in handy. Using z-index propriety we can "order" the div containers stack that we have. The larger the number is the higher the div is. Please note that z-index propriety will not work with "position: static" which is the default positioning of any div container, so we will change the position of the original side menu containers to "relative" in order for them to be ordered correctly.
Now the final CSS will look like this:
Click here to see full page in example 4.
Using this technique you can even add an image as a background.
Click here to see image background in example 5
I hope this tutorial is useful and help designers overcome the issue of div height.
More details
