Understanding Our Responsive Framework CSS

The following guide is here to show you how to work out the individual layout boxes size, both for fixed width templates and responsive templates

The following should help you understand how to work out the box size for a 1200px responsive max-width layout.

Step 1:

We start out with a fixed width - in this case it is 1200px

We set our distance between each box (margin / gutter) - in this case it is 60px

We now start to do some math.

Step 2:

First we find out what 60px in percentage is: 60px ÷ 1200px × 100 = 5%

Step 3:

We now decide on how many elements / sections / boxes we want to use and how they will look - our instance has 1, 2, 3, 4 & 5 box sections

To illustrate how these elements will work, we use the following demonstration:

  1. box
  2. box | margin | box
  3. box | margin | box | margin | box
  4. box | margin | box | margin | box | margin | box
  5. box | margin | box | margin | box | margin | box | margin | box

Step 4:

Now we work out the width of each box for each situation.

For the following demonstration we have completed the math for the points 2 & 3 from the above list:

WORKING OUT ONE HALF: ( box | margin | box )

Fixed width minus the gutter / margin, divide the result by two and your finished:
1200px − 60px = 1140px ÷ 2 = 570px

To work out the Responsive / fluid width we use the result from the fixed width:
570px ÷ 1200px × 100 = 47.5%

WORKING OUT ONE THIRD: ( box | margin | box | margin | box )

Here we have double the margin, so we need to double the margin measurement in our equation

Fixed width minus 2 × margin, divide the result by three and your finished:
1200px − 120px ÷ 3 = 360px

To work out the Responsive / fluid width we use the result from the fixed width:
360px ÷ 1200px × 100 = 30%

So now we have an end result that mathematically looks like:

30% | 5% | 30% | 5% | 30%

Step 5:

Now that we have worked out the measurement for one element box we can work out the sum of multiple boxes:

For our example we use the "One Third" result from above, basically one box with a margin and two boxes combined together, using our visual help we go from:

box | margin | box | margin | box
to
box | margin | boxbox

1 box = 1200px − 120px ÷ 3 = 360px

2 boxes = width of 1 box × 2 + the width of one margin (the margin is no-longer in use so it is added to the width of the two boxes)

2 boxes = 360px × 2 + 60px = 780px

The responsive width is found using the above result:

780px ÷ 1200px × 100 = 65%

So now we have an end result that mathematically looks like:

30% | 5% | 65%

Conclusion:

To work out the sizes for the other boxes is exactly the same as the two examples shown above.

We have left our math in the "framework.css" so that you can actually see how we worked out the individual elements sizes.

When working out the width of each box don't be afraid of the decimal points or the long numbers. Whatever you do don't round the results up or down, the browser will do that when the page is shown.