Arranging columns for a web page theme

Yesterday, I published the first version of a tool to calculate and visualise website column widths which simplifies the process of splitting a content area into a number of equally spaced equal width columns. Yes, there are plenty of tools out there that will take a given column width and spacing and tell you the overall width, but there aren’t many that you can give the total width and the number of columns you’re looking for and you get to see the available column width options.

… which is where my tool kicks off from: a problem a friend had where four columns needed to fit in a given width. The total width was non-negotiable, but the width of a given column could be varied. Punching numbers in to a calculator gave a couple of results but it’s a pain to have to do that every time. Surely a bit of javascript on a web page could sort this?

Basically, we approach the problem as follows: For n columns in a width w, the width of the column c and inter-column spacing s are represented by the following, where a solution is valid if c and s are natural numbers and c > s

nc+(n-1)s = w, where n, c, s, w are a subset of the natural numbers

As it turns out, the solutions to such a problem call on an amazing array of areas of mathematics: integer programming, relaxation methods and the extended Euclidean algorithm because the mathematical representation of this problem is a linear Diophantine equation in two variables.

For what it’s worth, the arrangements tool does none of the above because the set of numbers involved in the solutions is sufficiently small the whole thing can be done iteratively; it is realistic to compute and store the full set of solutions, which is nice.