The 2006 FIFA World Cup begins tomorrow at noon ET when Germany face Costa Rica in the opening match. Below is my tournament bracket for the office pool. The goal is to earn the most points, which are awarded thusly:

Group stage: 1 point for predicting the result (winner/loser), 3 extra points for getting the correct score, of each game. 2 points for each team correctly predicted to make it to the second round. Note: the first round contains 32 teams in 8 groups of 4. Each team plays the other teams in their group once. The top two teams from each group advance.
Second round: 2 points for result, 4 extra points for score.
Quarterfinals: 3 points for result, 6 extra points for score.
Semifinals: 5 points for result, 10 extra for score.
Final: 10 for result, 20 extra for score.

I'll update the chart after each day's games with the actual results and my scores.

Note: Extremely nerdy content follows. Also, the following CSS/HTML excerpts have been edited for brevity/relevance.

The Grid

The underlying grid for cmerrill.com is a 935-pixel wide container with nine 95-pixel columns separated by 10-pixel gutters.

I have set of classes to define the widths for any size box from one column to nine columns.

.col1 { width: 95px; }
...
.col4 { width: 410px; }
...
.col9 { width: 935px; }


The columns aren't multiples of 95 because of the built-in gutters. So to get four columns, the width needs to accomodate all four colums (4 x 95) plus the gutters between the columns (3 X 10) for a total of 410 pixels.

With this system, there are a ton of potential layouts: one 9-column area, three 3-column areas, two 4-column areas plus one 1-column area, one 5-column area plus one 4-column area, etc.

leftMiddle vs. rightmost

In order to maintain the gutter space between columns, I need 10 pixels of margin between two columns. But, I don't want any margin on the far left or far right of grid. To manage this, I created two classes: leftMiddle and rightmost.

.leftMiddle { margin-right: 10px; }
.rightmost { margin-right: 0; }


Basically, any column that has another column to the right gets the margin. The column furthest to the right doesn't get the margin.

By assigning multiple classes to a single div, I'm able to create the layout. For a two-column layout (one 5-col and one 4-col), the HTML looks like this:



For a three column layout, it might look like this:



Horizontal divisions

The system of columns breaks up the page vertically, but there are also sections of the page split horizontally, which I'll refer to as "rows". Unlike the columns, whose widths are fixed, the height of a row isn't specified, it should grow and shrink depending on the contents.

I have five rows defined in the CSS (names influenced by my newspaper layout experience): header, aboveFold, fold, belowFold and footer.

The header is the brown area with the North logotype, aboveFold is the main content area, fold is the blue strip, belowFold is the brown area near the bottom and footer is at the very bottom of the page (though it's currently not used).

The glue

If you open a wide browser window, you'll notice the content is centered, but the brown background of the header and footer areas extends across the entire
page. This is where the container div comes in to keep the different areas aligned.

Normally, for fixed-width pages, the container div would be the outermost div.




But if I were to do that, the background colors of the header, belowFold and fold would only be 935 pixels -- not stretched across the entire page. So what I've done is used a container div inside each of the rows to rein in the content.



The outer div (belowFold) specifies the background color and extends across the page. The container div centers the content and keeps it within a 9-column wide area.

.container { margin: 0 auto; width: 935px; }


Sidebar

When you have two adjacent pieces in a print publication, you need someway to differentiate them visually. Otherwise it's easy to assume they're part of the same piece. This is usually accomplished by using a thin rule to separate the elements, or shading the background of one of the elements.

I chose to shade the background of the sidebar. This created a particular challenge. My 10-pixel gutter between columns separated the main content from the sidebar, but the content inside the sidebar was running up against the edge

I had to create a new class, sidebar, to alleviate this problem.

.sidebar { padding: 10px; }


This created another problem. Now the content area of the sidebar is 20 pixels narrower than normal. So my regular column classes won't fit.

In a 4-column sidebar, my content area is now 390 pixels. But if I want to put two 2-column sections inside, their total is still 410 pixels. My workaround is to create a special case for a smaller col2 class that will fit in the sidebar.

.sidebar .col2 { width: 190px !important; }


Now, anytime a col2 div occurs within a sidebar div, it's smaller to accomodate the padding on the sidebar. Here's what the HTML looks like:



For now, I've only created the special case for using col2 within the sidebar because that's the only size I'm using so far. If I ever decide to use other widths within the sidebar, I can create modified versions of the other column classes.

Conclusion

Using a grid system gives me plenty of layout options while helping to maintain visual consistenty across the site.

The main problem I see with this system is the large amount of nested divs. I'm sure people smarter than I could create a more streamlined CSS/HTML version of the same thing, and at some point, I'll probably try to go back and see if I can trim some of the fat. For now, though, I'm pretty happy with how it turned out.

Questions, comments and recommendations are welcome.

I don't have the focus necessary to create a "full" post out of any of the following items, so here's a series of briefs as to what I've been up to of late.

North 2k6Hopefully you've noticed a change in appearance on this corner of the Web. It was a while in the making, and even still needs some polish. At some point in the future I'll write about the grid system I established. Web nerds who poke under the hood will probably gasp at the number of extra div tags, but at the moment, I'm not sure there's a workaround. The survey responses were helpful, so another thank you to those who participated is in order: Thank you.

TXT meI removed the TXT me feature which was located at the bottom of the site. I picked up my phone today and had several spam messages. Now that I'm back on an official plan, I don't have free incoming text messages anymore and I'd rather not have to pay for spam -- I get enough for free as it is. Please feel free to recommend features or content to include in the space that once was used by the TXT form.

Ultimate FrisbeeI recently joined a group of people to play pick-up ultimate a couple times a week. I've only been once so far but it was a blast. I didn't realize how out of shape I was. Hopefully regular activity will help me accomplish my 3-miles-in-25.5-minutes resolution. I may even start going to the gym at work. Sitting at a desk for at least 8 hours a day plus my intake of Chick-Fil-A at regular intervals isn't doing much good for my stamina.

SoccerThe FIFA World Cup begins in less than a week, which is exciting. I'm looking forward to going up the street and watching some games at the pub. Tonight is also the first home game for the Atlanta Silverbacks. They have a new stadium this season, so expect to see more details and photos in the coming days.

BowlingMy subliminal bowling project is still in progress. In addition to the subliminal bowling, I'm joining the UrHo team of the IBL.