A very common problem if you’re using CSS is creating equal columns.
That is, having the same height.
There are lots of reasons why two or more columns should have the same height, but that’s out of the scope for this article.
Point is, if you use simple CSS, a column ends whenever the content ends and thus you almost always end up with columns of different heights.
Like when you have a lot of content and only a short menu bar. In such a situation you may want to create equal columns.
I usually solve this problem using the ‘faux columns‘ feature by Dan Cederholm.
If that is way above you head, just relax (I have an easy solution below) and consider this.
Cascading Style Sheets (CSS), was brought about by the World Wide Web Consortium (W3C), and not by evil programmers with too much time on their hands as originally believed, to develop a standard which could be interpreted by different browsers. This became a necessity as Microsoft and Netscape battled for world domination and kept adding html attributes which were only understood by their browser. Great for them, bad for us.
Now, through the implementation of CSS, we can design ONE website for all browsers instead of multiple websites, one for each browser.
CSS really makes your life as a webmaster easy. Yet lots of people don’t know how to use CSS or even are afraid to start using it. We really should change that right now.
You see, in the past I wrote a CSS beginners guide called ‘Taming the Beast’. It’s an easy read and a really simple way to learn CSS and start using it.
Keep your wallet in your pocket, as it is a free download for you.
Download your CSS tutorial.
Read it and start using it.
Now, back to the equal columns height using simple CSS.
Last week I was asked to modify a CSS file of an existing site in order to correctly show the menu bar.
It used a ‘position:absolute’ feature to get the menu bar exactly where wanted, but that didn’t work well.
Because position:absolute is relative to the screen instead of the page.
So I deleted that part and made some changes in the HTML page in order to have the menu displayed well.
But that immediately lead to another problem: the equal columns problem.
The columns didn’t have the same height, as the owner wanted. And since I wasn’t in control of the site, I couldn’t add a background image in order to use the ‘faux columns’ solution.
So I searched Google for an instant solution and found an easy one.
Maybe easier than the ‘faux columns’, because you always have to change your background image whenever you change the width of a column.
The solution is is very simple and has a few advantages over the ‘faux columns’ one. You can read all about it at Equal Columns.
Worked like charm!
Don’t forget to download your CSS beginners guide.
Then let me know what you think.
Do you use CSS or are you planning to use it?
Post your comments below.
Share this post using these icons:
- 7 Great Tools For Web Design and Development
- SEO and Website Design
- 5 Reasons You Require a Website Now
- What Every Business Owner Must Know About Business Website Design
- Top 8 Characteristics of an Unforgettable Logo
- A Flying Start with Good Title Tag
- 10 Tips for a Successful E-Commerce Web Design
- Web Design Tips for Small Business
- Disaster Recovery and Cloud Computing
- Is Joomla Website Design Good for Small Businesses