Web International Awards

payday loan


MAR 2009 2

Multi column layout, equal height

This post was inspired by the actual development of this design. The process would have been easy but, as I wanted to add the post info (date, comments) as an ear, floating on the left of the content box, things got a little more complicated. One solution was using some technique based on faux columns, having a content wrapper and a sidewrapper. The content wrapper would float to the left. The post info box would float relative to its parent to the left, but only that would have kept the box inside the content wrapper, not right just next to it.

Floating post info box inside the content box

The temporary solution

This issue has a relatively fast solution. You just put a negative left margin to the post info box, and it should go right out of there. This works relatively ok. The problems is that only really new browsers had no issues with this. I tested on IE 6, Firefox 1.06 and the post info box with negative margins disappeared from the view. That was due to the fact that the negative margin moved the box outside the content wrapper.

Floating post info box with negative margins, outside of the content wrapper

That could have been easily fixed by expanding the content wrapper with the post info box width, and floating the content to the right. Basically, this would have been a faux column layout inside another faux column layout. It works great, but when you hit the next problem, there are no apparent solutions at the horizon.

What if you want rounded corners? CSS 3 rounded corners!

The problem with rounded corners is that you cannot expand the content wrapper, as the corners would go away from the content, rendering the layout useless. (check out the below image). The solution I found was to add a new wrapper, which would wrap the post info box, the content boxes (multiple posts have multiple boxes), and the side wrapper.

Rounded corners on expanded box vs new overall wrapper

That new wrapper looks great. All you need to do is to add left rounded corners to the content boxes, and right rounded corners to the side wrapper. WRONG! That would work in most cases, but if you have a really long side wrapper, chances are you will have pages with content that do not have the same height! And that's when the cookie crumbles. Check out how you could end up with your background.

Rounded corners with new wrapper installed. Content height lower than side wrapper

We put all that thinking into it and it looks like it doesn't work. Ok then, Browsers 1 - Developers 0. Some say you can fix this problem with going to css height and min-height properties. Having a body , html and wrappers with height:100%, and the last content box having min-height:100% should fix the problem. Well it doesn't. It does that if you don't have many nested wrappers. If you have many wrappers, it works only if the content area's height is lower than that of the side wrapper. If it is higher, you get the original problem (just the one you see in the screen above), but transferred to the side wrapper. Browsers 1 - Developers 1 because the problem is partially solved.

The ultimate solution

After struggling for around 2 and a half hours with height, min-height and wrapper variations, after not reaching any solution, I fixed this in 10 minutes with jQuery. Who would have though that the solution is that simple? So what was the jQuery code to handle this issue.

Remember we had a content wrapper, containing content boxes, one for each post? We also have the side wrapper. The solution is to get the height of the side wrapper, the height of the content wrapper, which grows due to the content boxes, and then compare the two values. If the content wrapper's height is smaller, you should increase it to match that of the side wrapper. But how?

One span and jQuery to the rescue!

You simply add a span tag to the end of the last content box, not the content wrapper. If the height of the content wrapper is smaller than that of the side wrapper, set the span tag's height to be the difference between the mentioned 2 heights. The result, no matter which box is the highest, is the one you see on this very own site. With rounded corners. All the time. Browsers 1 - Developers 2.

The jQuery code

	var diff = 0;
	var sideWrapper = 0;
	var cWrapper = 0;
	sideWrapper = $('#sidewrapper').height();
	cWrapper = $('#cwrapper').height();
	if(cWrapper < sideWrapper)
			diff = sideWrapper - cWrapper;

I hope you enjoyed this article. Let me know what you think about it in the comments. If you liked this one, you can stay updated to upcoming articles via the rss feed. A demo, and full source of this layout will be soon available.

Published on Wednesday, March 25th, 2009 at 11:52 am in code, css, design, javascript.

About Bogdan Pop

Bogdan Pop is a young Romanian entrepreneur who runs WebRaptor. He is a web developer with awesome design skills, who enjoys writing about everyday's work and usability. He relaxes by taking photos every once in a while and by mixing french electronic music. Connect with him via Twitter.
  1. Columnas de igual altura con jQuery | VisualXtudio says: March 29th, 2009 at 12:44 pm

    […] Artículo original Comparte […]

  2. Building a live news blogging system in php. Spiced with HTML5, CSS3 and jQuery [part I] says: March 30th, 2010 at 3:49 pm

    […] and we've also seen how we can achieve equal heights for two independent columns using javascript (we've also got a dedicated article about this, and we're using the same technique for this site […]

Save time next time! You won't have to fill out all these fields again. Register in just a few clicks and then login.

If you do not have a username, you can register in just a few clicks.