Where's the equilibrium in css height?

Recently, just as anyone who has experienced the ins and outs of css, I have been encountering my share of creative css problems. One thing I discovered while trying to solve my frustrations is that frameworks can be a cross compliant and a time saving solution. The downside is technique is that if the user has javascript disabled it won’t be effective. This technique is useful if you want to push the envelop of css design. View final solution.

src="/files/Image/nathan/colblog_figurea2.jpg"

The problem I encountered:

What I needed to do with this particular layout is to set an image bottom left/right right inside of any given column in the background just above the footer using for example: background: #ccc url(“image/directory.png”) bottom left no-repeat;

However, as seen in Figure A, the images simply don’t line up and aren’t just above the footer. The problem is that the second column has greater height than the rest.

Since the website I was working with is currently using a framework called mooTools figured I might as well explore it’s functions to see what I could come up with. What I discovered is that you can use it’s functions to change css properties dynamically on the fly and calculate the height of each column.

The common problem and solution:

The common problem is usual the same as mine except minus the images and add in a three column varying gradient background. One solution is to wrap all three columns in a wrapper and set the background to repeat-y.

Another solution would be to use the min-height property to equal all three columns. with a minimum height. This works on smaller static pages but when you need your content to be variable to a larger extent, such as on this blog page, a min-height becomes unrealistic. And when one column’s content goes over even one pixel over the min-height your layout breaks.

Multi-Column Layouts Climb Out of the Box - An Alist Apart article that discusses a purely css solution. There are many purely css solutions out there for the common problem.

The Framework Solution:

Using mooTools, for example, all I needed to do was to find a way to calculate the height of the tallest column. I did some investigating in the mooTools documentation and I found a property that would do the job called getSize. You guessed it. It calculates either the height or if need the width of the specified element. In my case I needed it to calculate height, so I used: var pos = $(’col2’).getSize();

Then what I need to do is to set the variable pos as the height of col2 (column two). The second thing I needed to do was to change the style property of column one and three. What I used was the setStyle property. You guessed this one as well. It simply changes the specified property to what you set it to. Therefore, I used $$(’div#col1’).setStyle(’height’, hsize+’px’); to set col1 to the height of the second column and $$(’div#col3’).setStyle(’height’, hsize+’px’); for the third column. When using mooTools you need to account for padding by using the following:  var hsize = hsize-20; So if have 10px padding on top and 10px padding on the bottom, it adds to 20. If your columns have varying padding then you would have to customize it for each div.

Thats all there is too it. Surprising simple and it works throughout the website without “a flicker” or performance hikes that I’m aware of. The Javascript Code is as follow accompanied with the framework .js files:

window.addEvent(’domready’, function(){

    var pos = $(’col2’).getSize();
    var hsize = pos.size[’y’];
    var hsize = hsize-20;

    $$(’div#col1’).setStyle(’height’, hsize+’px’);
    $$(’div#col3’).setStyle(’height’, hsize+’px’); 

});

/

View the final solution in action.

The conclusion I reached:

It doesn’t make a whole lot of sense using Javascript framework in many situations if a css alternative can do the same job in less time. However, when you find yourself dealing with advanced css layouts using a compliant framework can save you time, frustration and can be what you are looking for.  I recommend when using this technique that you assign a min-height  for col1 and col3 to act as a safeguard and to keep a somewhat stream line look.

You can also take this technique to the next level by using a series of if statements and finding ways to utilize the functions available to manipulate your css output. For example, you can use if statements to calculate which column is the highest and set it to that value to all columns. You can also use a function such as getSize to manipulate the width of a column.

One downside of this technique is that if you don’t know a Javascript framework, it’s time to learn one. If you have a background in programming (especially Javascript) you’ll find that frameworks are fairly easy to pick up and can save you time down the road.

Only bug I’ve found so far using this technique is that if in firefox you increase the browsers font size the layout will break by a couple pixels. But that really isn’t an issue because most users don’t go around adjusting the font every time the encounter a new page. I tried doing the same with regular Javascript but the biggest problem I came across is that you have to find ways for your Javascript to be cross compliant which is time consuming. I recommend using a compliant frameworks such as mooTools.

You are not just limited to mooTools, there are other frameworks (such as Scriptaculous) which do just the same with similar functions. Like I said before, the only problem with this technique is if the user has Javascript disabled then this won’t work for you. I feel that it’s your call on this one. I usually avoid using such techniques where possible but in my case, when I was using a framework anyway, it didn’t make any difference.

Next time you find yourself thinking css layout is impossible to do, think of ways that a framework could help make it possible.

Other frameworks:

to blog