0

I thought I had Susy down, but have been struggling with this for a couple of hours now. I feel incredibly stupid, too, because I have never had this problem before, so I know it is on my end. Probably a misunderstanding of the box model, but here is what I am having trouble with.

I have my container div set up, and in it a #main div with 9 columns for content, and a 3 column sidebar. The #main div has a white background so I need some padding around it, but whenever I add the padding the layout breaks and the sidebar gets pushed down to the bottom.

no padding: enter image description here

with padding: enter image description here

my html structure is:
.container
+ main
++ content ( @include span(9) )
++ sidebar ( @include span(last 3) )

I also have border box-sizing set globally both in the html and the susy setting. If I add width: 100% and box-sizing: content-box to the #main div, this works, but makes the container wider on the right side pushing it past the elements above and below it, which I understand since content-box adds to it. This works in a sense, but not my desired result. I need the #main div to stay the same width but allow me to add padding to the left and right.

Like I said, this is a new issue for me. I have built several sites with Susy and haven't had this problem before, so I feel incredibly stupid.

Update 1: Adding padding to the Content and Sidebar div works, except that on one of my pages I have an image gallery in the Content div which does the same thing, third item in the row falls down to the bottom.

Update 2: After spending all day thinking and working on this, I've come to the conclusion that this has to do with it being a Fixed site with fixed column widths. The layout doesn't break when the widths of the divs are set in %'s even with a fixed width container. Interesting. Maybe there is a way to get Susy to work like that using the 'static' math output, I'm not sure.

yivi
  • 42,438
  • 18
  • 116
  • 138
Colby Work
  • 13
  • 5
  • here's a link to a codepen...i couldn't put it in the OP since I am not rep 10 and can't have more than 2 links. http://codepen.io/colbywork/pen/myMgmM – Colby Work Jan 30 '15 at 19:04
  • Instead of adding the padding to `#main` add it to `#content` and `#sidebar`. – APAD1 Jan 30 '15 at 19:06
  • @APAD1 that seems to do the trick, thank you. Am I wrong in assuming there should be a way to make the other method work? I thought border-box was supposed to take care of issues like that. – Colby Work Jan 30 '15 at 22:14
  • @ColbyWork, the border-box setting wont help you. Implement it as in my answer and you'll be ok. – yivi Feb 01 '15 at 17:37

2 Answers2

0

I was able to fix it by increasing it by 1 more column.

http://codepen.io/anon/pen/RNZOQL

columns: 13

The issue was because of the padding you needed extra columns.

QAZZY
  • 439
  • 6
  • 9
  • that does work, but not quite what I was after. I have other parts of the site that rely on the 12 grids, (3 blocks, 4 columns) and this puts a huge gap. thank you for taking the time to help me, though. – Colby Work Jan 30 '15 at 22:16
0

Add it to your columns, like this:

#content {
  @include span(9 of 12);
  padding: 20px 0 20px 20px;
}

#sidebar {
  @include span(last 3 of 12);
  padding: 20px 20px 20px 0;
}

Here you have it working:

http://codepen.io/yivi/pen/BywygG

And here with fluid math: http://codepen.io/yivi/pen/jEGEjj

yivi
  • 42,438
  • 18
  • 116
  • 138
  • yivi, look what happens when I add nesting...the issue seems to repeat itself: http://codepen.io/colbywork/pen/wBrroO – Colby Work Feb 03 '15 at 05:20
  • ah, never mind-- works with the fluid math. bingo, just like i thought earlier in my second update. thanks @yivi – Colby Work Feb 03 '15 at 05:28
  • Well, yes. If you are going to nest more susy containers inside that one, gutters will mess you up. Either you properly declare a nested container with the modified width, of you'll break things. But that wasn't the original question. If the answer helped, please accept it? Regards. – yivi Feb 03 '15 at 07:40