Skeleton responsive grid broken - columns dropping down

Question

So, I've just began playing around with the demo of Skeleton, the responsive grid framework.

On my demo page, in the header I've tried to put the H1 in to an eight column div, and the buttons in to an eight column grid - these are inside a 16 column container.

However, the buttons drop below the H1.

I really can't see where this has gone wrong, if anyone can see something obvious then it would be most helpful.

Answer 1

Seems like the documentation is a bit unclear - alpha and omega need to be added to first/last columns to sort out the margins.

Answer 2

Your issue has to do with the margins. The width of the .sixteen.columns (940px) does not seem to support the width and margin of two children that are .eight wide ([460px x 2] in width + [10px x 4] in margins = 960px). I don't know enough about Skeleton to know if this is their issue or not, but it seems so.

You need to determine how you want those children to react. You can do one of two things easily, though how it affects your "column" alignment will vary.

#1 Reduce All Child Margins

.sixteen > .eight.columns { 
    margin-right: 5px; 
    margin-left: 5px; 
}

#2 Keep the Outer Margin and Eliminate Center Margin

.sixteen > .eight.columns:first-child { 
    margin-right: 0;  
}

.sixteen > .eight.columns:last-child { 
    margin-left: 0;  
}