There are many, many ways to create equal columns with CSS. This is one of those features that was MUCH simpler to achieve back in the days of html tables. In the next couple of years, when the use of CSS tables becomes more reliable, we won’t have this problem anymore. (For more information, watch this video.)
I betcha didn’t know that there is a neat way to create equal columns by using absolute positioning. Will this be applicable for all scenarios? Absolutely not. But, it’s a nice trick to have in your tool box!
Equal Columns With Absolute Positioning
Be sure to import the following script for your IE6 users. It will save you many headaches!
<!--[if lt IE 8]> <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script> <![endif]-->
Fawaz
December 30th, 2008
This is great for those who don’t know…
I learned this since I used to design myspace layouts…
It’s a good brain refresher tho…
Jeff Adams
December 30th, 2008
I like it - simple yet effective. Does anyone else remember the negative margin hack for this type of thing? Rediculous when you realise how easy it can be!
Good refresher cheers!
Jason Lengstorf
December 30th, 2008
I think the IE8 JavaScript tip alone made this worth watching.
-Jason
Brenley
December 30th, 2008
Equal height columns can also be acheived using Jquery. See Below:
http://blog.brenelz.com/2008/12/08/jquery-custom-plug-in-equal-height-columns/
-Brenelz
Jeffrey
December 30th, 2008
@Brenley,
Sure you can use jQuery to accomplish the task; But remember, it won’t work if Javascript is disabled.
Chris
December 30th, 2008
Hey you should do a whole series on CSS. Just a thought. Thanks
Marek Holeszowski
December 30th, 2008
Great video, i was baffled at the dean edwards tip at the end, i can not believe i never came across this javascript script! I will test it out on a up and coming project as im sure ie 6 will cry at me!
Jeffrey
December 30th, 2008
@Chris - I’ve definitely thought about it!
Player
December 30th, 2008
Nice and simple! Thanks! = )
Anthony
December 30th, 2008
I love this site. It has caused me to go back to my code and rethink things and make things work faster and more standards compliant. If every web developer learned these things it would make the web a happier place, well at least for developers.
Jeffery you do a kick ass job with the video tutorial… keep it up!
Mark
December 31st, 2008
Jeffrey, you are doing an amazing job with the screen casts… I can learn so much by watching over reading… I found the site just over a week ago and have been watching everything I can find!
I would agree with Chris above, a CSS series would be an excellent addition.
Keep up the great work.
Drew
December 31st, 2008
Hey Jeffrey,
Great tutorial, I’ve only used that technique once but it works nicely. Have you consider using firebug for live css editing? I also use web developer toolbar for certain things but have found firebug to be amazing for editing HTML and css on the fly.
Regards,
Drew
Srigi
December 31st, 2008
to Jeff >> in the ending of tutorial is visible, that #main has green backgroud. So my idea is to set background-color: orange to it, so it equals to background-color of the sidebar. This do the trick of equal columns without conditional comments workaround.
Pimmetje
December 31st, 2008
I like the tutorials.
I would also like a CSS part. My CSS is bad :D.
If you you want to give them away as download that would be great. If you need a mirror please send me a email.
Keep up the good work.
Kind regards and a Happy new Year to you all
Pimmetje
Andy Gongea
December 31st, 2008
Hey Jeff,
I think you should credit Dan Rubin for showing this on 24ways.org
http://24ways.org/2008/absolute-columns
I betcha didn’t know this technique 10 days ago.
Jeffrey
December 31st, 2008
Actually, I learned thing technique from a book. Dan just reminded me of it; So I thought I’d create a video tut. Did I not mention that during the screencast?
I’ll try to track down the book. I think it was one of the SitePoint CSS ones.
Jeffrey
December 31st, 2008
@Drew - Sure, I use FireBug too. But for recording purposes, it’s easier to have the sidebar.
M.A.Yoosuf
December 31st, 2008
i knew this, but i did’t know that we can apply also for sidebar :S, any way thank you Jeff
Samuel Costa
December 31st, 2008
I´m with Chris, you should do a whole series on CSS. We could really really learn a lot from you and also withs all the comments of everybody.
I’m your fan Jeff, keep it up,
Sam, from Lille
iEthan
December 31st, 2008
I use this all the time in my sites… but good to know…
Rick
December 31st, 2008
Whoa “Dean Edwards IE8 script” didn’t know about that one! Thanks!
Drew
January 1st, 2009
@Jeff,
Ah yes, that makes sense. I didn’t keep in mind that you firebug would have taken up the bottom half of your screen
-Drew
Oscar Godson
January 3rd, 2009
@Jeffrey don’t get me wrong I think this is an awesome tutorial and a great CSS trick, but when you can jQuery, can do it in about 4 lines of code, almost everyone (about 95%) has JS enabled (except for just text browsers which CSS wouldn’t be applicable anyways), and is cross browser compliant, and even more so, you are using a script anyways
Keep up the good CSS work!
THE MOLITOR
January 6th, 2009
Thanks so much for this! I didn’t know about the Dean Edwards script. That will save me many headaches!!!
THE MOLITOR
January 6th, 2009
I copied everything you did to practice this and I noticed that when the primaryContent is shorter than the secondaryContent, the secondaryContent flows on top of the footer. Is there a fix for this?
namek
January 7th, 2009
Great job
Marcio
January 7th, 2009
@the molitor
Same happens with me, i am trying to fix it too but with no success.
Jason
January 10th, 2009
Wow very nice
this is a great alternative to the faux column method!
Kate
January 13th, 2009
This is great - thanks!
saurabh
January 20th, 2009
Wow ! nice video… thnx for sharing …
Keep up adding cool videos n tutorials like this …!
Mithun
January 22nd, 2009
Hi Jeffrey,
Wonderful tutorials ! It will be great if you can post tutorials on Ruby on Rails .
Thanks ,
Mithun
Jorge
January 27th, 2009
Thanks Jeffrey, will be waiting for the CSS series, that would be great. Thanks again.
Hassan
February 2nd, 2009
Hey Jeff!
Can you please let me know where to get IETester from?
Thanks a lot in advance buddy! You’re Fantastic
Mel
March 4th, 2009
Thank I love it !
Mel
March 4th, 2009
What happen if you have only one sentence in the primaryContent?
lewo
March 30th, 2009
Thanks for this tuto.
Adam Winogrodzki
April 19th, 2009
Great tut ! loved it thanks !
Heh
April 27th, 2009
Nice faux mac, ass.