0

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.

Clay Smith
  • 1,051
  • 14
  • 27
  • it sounds like a CSS issue, but I can't find the CSS files on your demo Pastebin link, could you please whip one up with [JS Fiddle](http://jsfiddle.net/) or [CodePen](http://codepen.io/)? – Timmah Aug 11 '14 at 02:29
  • @Timmah I just fixed it by getting rid of the border on my div tag that was pushing it off of the page. the css files are at http://www.getskeleton.com/ , my css that messed it up is in the – Clay Smith Aug 11 '14 at 02:50

1 Answers1

1

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/

kretzm
  • 762
  • 1
  • 7
  • 14