The one of the most common questions that arises to web designers is how to extend the background color of a column to extend all the way down.
The concept is very simple. But first of all let me explain you the situation here. Consider the image below.
You want both the columns to stretch down till the end equally unlike the above examples. The bad part in CSS is that the elements stretch only up to the size they require. For example a 600px image wrapped inside a div will make the div stretch only up to 600px
The Tip : Using Faux Columns
Well the secret of making those 2 columbns stretch down is simply mere. What we do is create a container wrapping both the divs with a backrgound image and repeating it vertically. Simple yet effective, isn’t it ?
Here is our image that we will be using in the background
The image, though some pixels tall, but when placed as a background and tiled vertically will create 2 columns. The above image will be the background on the main wrapper and the CSS for the element will be
background: #ccc url(../images/faux-column.gif) repeat-y 50% 0;
The 50% 0 refers to positioning of the background image, which in our case 50% means centering the image horizontally.
Conclusion
The concept is simple but many people wont be knowing it. If you liked it please do comment.
You might consider viewing the example here
Related posts:
