I’m building a Twitter-Bootstrap site that has two columns: a narrow side column and a main article column. On each page, the widths of the columns are fixed and the heights depend on how much is inside them. The side column’s height always must match the main column’s, but the main column’s height is variable. On some pages, the main column is short because there aren’t many articles inside while on other pages its height is much longer. When the main column’s height is taller than the side column’s, the side column’s increases.
My question is, what are the best methods/technologies to implement this, without using a CMS? I’m thinking classes, maybe something along the lines of masonry CSS…but not quite sure where to start. For the smaller-screen version, I’m planning to align them as just one column, so this won’t need to be fully responsive.
I’ve prepared a crude drawing of what I’m trying to accomplish: