Wiffle math

Check out this Grid calculator, created by Patrick Sullivan/The Register-Guard.

Requirements:

• The following main ad widths needed to fit within the respective column widths:
  • 970px
  • 728px
  • 640px
  • 300px
• The width of 2 columns + the margin between them needs to fit a 300px width ad
• All column and margin values must be whole numbers

---

Variables to test:

Column Width:

This is the width for 1 of the 8 total columns. You can also visualize 4 "full" columns, each divided into 2 separate 1/2 columns. This makes it easier to understand the math below.

Margin Width:

This is the width of the margin between all the columns (regardless of 1/2 or full).
Our original conclusion was that a margin of 20px would give us adequate space for the ads, content, and to achieve the ever-illusive perfect amount of "white-space." However, as the math below shows, this was not the case... dun, dun, dunnn.

---

Math:

/////////////////// WARNING: Nerd Alert ///////////////////

To fully understand the math, I must preface the idea we used:
The foundation of the "math" is our use of a linear function (not to be confused with function(){};). A linear function is unique in that there is only 1 output (y) for every 1 input (x). This differs from the draw a smiley face on your graphing calculator in Trig class (polynomial) functions, which have multiple outputs for a single input. So the good stuff:

/////////////////////////////////////////////////////////////

Our input (x) = Margin width between each 1/2 column
Our ouput (y) = The width of one 1/2 column
Our main parameter: Create a column width that would fit our 640px ad size in two full columns.

Thus (using the properties of algebra):
4 columns + 3 margins in between each column = 640px
4 columns = 640px - 3 margins in between each column
1 column = (640px - 3 margins in between each column) / 4
-------------------------------------------
y = (640 - 3x) / 4

Prior to determining the 2 column width of 640px, we used this Grid calculator to test various margin and column widths. It follows the same basics of the above function, but uses 2 variables: margin width and column width. Entering values into these variables (yellow cells) will then generate the rest of the column widths. We could then see if the entered margin and 1 column widths would result in columns that were large enough for all the ads.

An alternate function we tested, but decided was too impractical, used 2x for the margin width between "full" columns and x for the width between 1/2 columns: y = (640 - 4x) / 4

More images and notes to come