For web marketing training, presentations and workshops visit Pacifica Training. If you wish to ask questions about website marketing please head over and register free at the website marketing forum, a knowledge base and community driven discussion group.
Vertical stretching columns
Published: January 11, 2005
Rolling on from our Tableless Design and Layout entry, the sharper ones among you may have noticed that when adding content to the DIV's, the columns do not vertically meet up at the bottom. They act independantly which is a nuisance when it comes to design.
So how do we get the columns to fall to the floor and give us the look we want?
By faking it. Rather than programmatically forcing the DIV's height attributes, we can fool the eye to think that columns indeed exist by careful use of a background image.
Take a look at the following XHTML.
<div id="main"> <div id="header"> <h1>This is a header</h1> </div> <div id="navigation"> <p>This is the navigation</p> </div> <div id="content"> <p>This is the content</p> </div> <div id="footer"> <p>This is a footer</p> </div> </div>
Now let's add the CSS to the above XHTML to format the layout.
/* set the containing div and centre it */ #main{ width: 750px; margin: 10px; margin-left: auto; margin-right: auto; padding: 0px; } /* set the header div */ #header{ padding: 5px; margin-bottom: 0px; background: #e2e2e2; } /* set the navigation div */ #navigation{ float: left; width: 200px; margin: 0px; margin-right: 0px; padding: 5px; background-color: transparent; } /* set the content div */ #content{ padding: 5px; margin-left: 210px; background-color: transparent; } /* set the footer div */ #footer{ padding: 5px; margin-top: 0px; background-color: #e2e2e2; clear: both; }
Notice how we have set the navigation and content DIV background attributes to transparent. This ensures that our framework "main" DIV's background image shows through.
We need to now add the background image to create the illusion.
/* set the main div */
#main{
width: 750px;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 0px;
background-image: url("bg_ex.gif");
background-repeat: repeat-y;
}
The two background attributes above ensures our background image is displayed and repeated vertically only.
So what does this image look like?
Makes sense now. Adjust the image according to your styling needs and bear in mind the widths involve on the navigation as this dictates the width of the image shading.
This method keeps things simple and saves any hardcore CSS solutions being used. Some say it's a cheat but it's valid and serves well.
Just wanted to say this is great. I've been searching for ages for a solution to this and this really is a clever solution - a lateral thinking solution - well done. I will defintely be using this technique in the future.