/* float all columns */
.col-a, .col-b, .col-c, .col-d, .col-e, .col-f, .col-g { float: left; }

/* 2-column equal-width grid */
.grid-a .col-a { width: 380px; margin-right: 10px; }
.grid-a .col-b { width: 380px; margin-left: 10px; }

/* 3-column equal width grid */
.grid-b .col-a { width: 240px; margin-right: 10px; }
.grid-b .col-b { width: 245px; margin-left: 7.5px; margin-right: 7.5px; }
.grid-b .col-c { width: 240px; margin-left: 10px; }

/* 3-column equal width grid with extra padding */
.grid-b2 .col-a { width: 240px; margin-right: 10px; }
.grid-b2 .col-b { width: 245px; margin-left: 12px; margin-right: 10px; }
.grid-b2 .col-c { width: 240px; margin-left: 10px; }

/* 2-column grid, main left, sidebar right */
.grid-c .col-a { width: 580px; margin-right: 10px; }
.grid-c .col-b { width: 180px; margin-left: 10px; }

/* 2-column grid, sidebar left, main right */
.grid-d .col-a { width: 180px; margin-right: 10px; }
.grid-d .col-b { width: 580px; margin-left: 10px; }

/* 4-column equal width grid */
.grid-e .col-a { width: 180px; margin-right: 10px; }
.grid-e .col-b { width: 180px; margin-left: 10px; margin-right: 10px; }
.grid-e .col-c { width: 180px; margin-left: 10px; margin-right: 10px; }
.grid-e .col-d { width: 180px; margin-left: 10px; }

/* 2 narrow cols then 1 big one */
.grid-f .col-a { width: 180px; margin-right: 10px; }
.grid-f .col-b { width: 180px; margin-left: 10px; margin-right: 10px; }
.grid-f .col-c { width: 380px; margin-left: 10px; }

.grid-g .col-a { width: 380px; margin-right: 10px; }
.grid-g .col-b { width: 380px; margin-left: 10px; margin-right: 10px; }
.grid-g .col-c { width: 180px; margin-left: 10px; }