There have been a number of times when I have had the issue of columns not lining up at the bottom of the website (or section of page). I always like using CSS to create these columns; it’s better for the environment. The issue that I could never work out was how to make them line up and not overlap div’s further on in the code (like the footer).

Well, I thought it was about time I investigated this properly and find a solution… so I Googled it and came up with the official solution from good ol’ W3C, and it is called the Pseudo-algorithm:

if ((column-width = auto) and (column-count = auto)) or
((available-width = unknown) and (column-count = auto)) then
exit; /* no columns */
fi

if (available-width = unknown) and (column-count != auto) and (column-width != auto) then
N := column-count;
W := column-width;
exit;
fi

if (available-width = unknown) then
available-width := shrink-to-fit;
fi

if (column-width = auto) then
if ((column-count – 1) * column-gap < available-width) then
N := column-count;
W := (available-width – ((N – 1) * column-gap))/N;
elsif (column-gap >= available-width) then
N := 1;
W := available-width;
else
N := floor(available-width/column-gap);

…

else
N := floor((available-width + column-gap) / (column-width + column-gap));
W := ((available-width + column-gap) / N) – column-gap;
fi

Ah, ja right! I am sure that it is all correct, but… so I continued the search… and came across the best explanation and even sample code @ matthewjamestaylor.com.

GREAT STUFF! A solution is explained nice and clearly and the illustrations assist in the enlightenment that you may experience.

I will put to use and report back on how it worked… Enjoy and let me know how you get along with it or if you have another solution.