Search code examples
cssskeleton-css-boilerplate

css skeleton framework getting all columns to fit on the same line

I'm trying to use the skeleton framework but I'm getting confused. Here is the code I'm trying to use:

http://pastebin.com/ZcEAed0D

I even tried adding alpha and omega to the beginning and end of the columns. But what I am left with looks like this:

http://imgur.com/En3QLA5

You see the sixteenth column is hanging off of the end. Shouldn't it be able to fit 16 columns worth of stuff on one line?

This happens if i try other combinations as like like fourteen and two, etc. It hangs off the end of the page.

Where am I going wrong?

Also are the widths between columns adjustable, and if so how? Any good tutorials on how to use all of skeletons features? Do you do a new line of the grid just by using up another 16 columns?

Thanks.

Solution

  • Since you are adding a 1px border to each column div, it is making each column container 1px wider than it should be. By default, a border expands the width of the container. To fix this, you must add the following CSS property to your "div" selector which will include the border into the container width calculation.

    box-sizing: border-box;

    More information about box sizing: http://css-tricks.com/box-sizing/