Having an Issue w/ Columns (+ Content Boxes & Margins)

[crlynre]

Hi there!
I’m trying to create something like a simple grid layout for some of the content pages of an _existing website_.

Basically, the way the columns need to work is:

1. margins exist inside the content area, but not the outer margins (left and right sides flush)

2. heights for all columns in a single row are equal to the longest one

3. columns have the capacity to contain a content box

This way I can approximate the sections of 2-column, 3-column, and 4-column grids, without re-doing the rest of the website.

I thought I solved everything with the columns & content boxes I’ve set up, plus nth-of-type and nth-last-of-type rules for the left and right margins. But that doesn’t seem to be the case. Any ideas on what is going on with this code?
http://codepen.io/crlynre/pen/aFpeo

Thanks for the help!

(And yes, lesson learned. In the future I really need to make sure all client websites — regardless of whether they are specced for fluid or responsive layouts — get developed with either a Twitter/Zurb Bootstrap…or switch to SCSS, which looks beautiful, at least the [Grids w/o Fuss](https://css-tricks.com/dont-overthink-it-grids/ “Grids w/o Fuss”) Chris posted last year!)

**Edit:** I figured out the columns, but now the footer (which also has columns) breaks!
The background color that makes up the footer extends up to the first set of columns and only behaves itself when I do: .footer {clear:both;}
…Which then clears the background color that extends on either side to the edges of the page.

I’m attempting to reduce the relevant code down so that I can put the problematic footer in my example Pen. Will update soon.

[Author]

Posts