Category Archives: Cross browser compatibility

The Divine Grid

Leave a reply

In my previous article, I covered the most common methods for using the golden ratio in web design. I also alluded to a discovery I made when I was trying to make a grid composed of golden rectangles. In this article, I’ll illustrate how to create such a grid, then I’ll give you one to play with.

Step 1: Define some constants

Let’s make the width of our page 980 pixels. We’ll use 6 columns and make the width of the gutters between our columns 10 pixels each. That means that the width of our columns is 155 pixels each, because of math:

(980 pixels - (5 gutters * 10 pixels)) / 6 columns = 155 pixels

Basically, the width of our columns is the width of our page divided by the number of columns after subtracting the total width of our gutters.

Step 2: Find the dimensions of a single grid cell using the golden ratio

Most webpage grids are composed of columns only, but ours will have rows as well. We want our grid to be composed of golden rectangles. So, to find the height of a single grid cell, we simply divide its width – the width of one of our columns – by the golden ratio:

155 pixels / 1.618 ~ 95.797 pixels

Since browsers can’t render sub-pixels, we’ll round the height of our rows to 96 pixels each. So the dimensions of a single grid cell in our grid is 155 pixels wide by 96 pixels high.

Step 3: Create bigger golden rectangles from smaller golden rectangles

Our columns are 155 pixels wide each, and the gutters between our columns are 10 pixels wide each. So, if we want an element on our page to span two columns, it would need to be 320 pixels wide:

155 pixels + 10 pixels + 155 pixels = 320 pixels

Now, if we want this element span two rows and to be a golden rectangle, we just divide its width by the golden ratio:

320 pixels / 1.618 ~ 197.771 pixels

So the dimensions of an element on our page that spans two columns and two rows is 320 pixels wide by 198 pixels high. That means that the height of the gutters between our rows is 6 pixels each, because that’s the space that’s left over after subtracting the total height of two rows from the height of a golden rectangle that spans two columns:

198 pixels - (2 * 96 pixels) = 6 pixels

We can follow this procedure to build our whole grid, which results in the following:

A grid composed of golden rectangles, 155 pixels wide by 96 pixels wide each

You can see from the image above that an element that spans three columns and three rows is 485 pixels wide by 300 pixels high, and element that spans four columns and four rows is 650 pixels wide and 402 pixels high, etc. Each of these bigger golden rectangles is made out of smaller golden rectangles.

Step 4: Make something cool

Now, download the Divine Grid from GitHub, which uses a page width of 988 pixels, 6 columns, a gutter width of 20 pixels, and a gutter height of 13 pixels. This results in a slightly different grid than the one above, but it works just as well:

A grid composed of golden rectangles, 148 pixels wide by 91 pixels wide each

Check out the included files for examples of the Divine Grid in action. demo.html contains at least seven golden rectangles. They are outlined in red in this screenshot, and an image of the grid is superimposed:

The Divine Grid - a fluid, responsive CSS grid framework based on the divine proportion, also known as the golden ratio

Finally, have a gander at the Divine Template – a fluid, responsive CSS template based on the Divine Grid:

The Divine Template - a fluid, responsive CSS template based on the Divine Grid

After you get a chance to play with it, I’d love to see what you came up with! You can post a link in the comments section below.

Also, there’s no reason why you can’t do something similar with seven, eight, or sixteen columns. I just like six.

Overflow – a secret benefit

Leave a reply

Continuing down the rabbit hole, I stumbled upon this article by Nicole Sullivan that describes the applications of a little known W3C spec:

When the overflow property is set, a new block formatting context is created. What does that mean? It changes the way the block interacts with floats. It no longer wraps around floats, but rather becomes narrower.

This comes in handy for many purposes, such as creating a media object or creating a layout with columns.

In case you can’t tell, I’m still trying to wrap my head around inuit.css. More on that later.

The “clearfix” debate

Leave a reply

Up until recently, I’ve been clearing nested floats the incorrect way – by adding additional markup to my HTML documents that added no semantic value. In fact, I didn’t even realize there was a “clearfix” debate or what “clearfix” even meant. (If you’ve never run into this problem, check out this little emulator on SitePoint. Notice how the white background doesn’t expand to encapsulate the sidebar as the sidebar gets longer.)

A comment in the code of Harry Roberts’ inuit.css pointed me to Nicolas Gallagher’s micro clearfix hack, which is a pretty efficient way to clear nested floats with a minimum of additional markup. However, additional markup is still required in his solution.

It seems to me that the best solution is one that was posted in 2005 by Peter-Paul Koch on QuirksMode. His solution requires no additional markup, and appears to have the exact same results in my own tests.

Please let me know if I overlooked something.

Update

Here’s the difference between the two methods:

Obviously, the first method pictured clips the image because its parent container is set to overflow: hidden. I should have realized the difference by looking at the code, but hopefully the diagram above will help someone else who’s confused over the issue.

It’s helpful to know both methods and when to use each one, as Nicolas even points out in the comments section on his post.