Fixed width sidebar in Foundation 6 without collapse

Question

I am working on a layout that fixes the size of a sidebar because our design doesn't handle squeezing on that element well, but does handle squeezing for the primary content (sidebar will have a hand full of different nav elements). I am following the advice of Miko here . I know this is for foundation 5 but the it worked nicely except for I had to add the collapse class to all of my rows. I still want my gutters to be maintained via foundation. I created an example layout with a bunch of different colors to test it out.

 .section { max-width: 400px; margin: 0 auto; position: relative; } @media (max-width: 600px) { .section { max-width: 1024px; } .section.sidebar-left { padding-left: 335px; } } .sidebar { position: absolute; min-width: 335px; top: 0; } .sidebar.sidebar-left { left: 0; } 

 <div class="section sidebar-left story-grid"> <div class="sidebar show-for-large sidebar-left" style="height: 100%; background-color: green;">Sidebar</div> <div class="row collapse" style="background-color: orange;"> <div class="row collapse" style="height: 50px; background-color: blue;">Full Width</div> <div class="row collapse"> <div style="height: 50px; max-width: 355px; background-color: pink;">Fixed Width</div> </div> <div class="row collapse"> <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> </div> <div class="row collapse"> <div class="columns small-2" style="height: 50px; background-color: red;">2 Columns</div> <div class="columns small-2" style="height: 50px; background-color: red;">2 Columns</div> <div class="columns small-2" style="height: 50px; background-color: red;">2 Columns</div> <div class="columns small-2" style="height: 50px; background-color: red;">2 Columns</div> <div class="columns small-2" style="height: 50px; background-color: red;">2 Columns</div> <div class="columns small-2" style="height: 50px; background-color: red;">2 Columns</div> </div> <div class="row collapse"> <div class="columns small-3" style="height: 50px; background-color: brown;">3 Columns</div> <div class="columns small-3" style="height: 50px; background-color: brown;">3 Columns</div> <div class="columns small-3" style="height: 50px; background-color: brown;">3 Columns</div> <div class="columns small-3" style="height: 50px; background-color: brown;">3 Columns</div> </div> <div class="row collapse"> <div class="columns small-4" style="height: 50px; background-color: crimson;">4 Columns</div> <div class="columns small-4" style="height: 50px; background-color: crimson;">4 Columns</div> <div class="columns small-4" style="height: 50px; background-color: crimson;">4 Columns</div> </div> <div class="row collapse"> <div class="columns small-6" style="height: 50px; background-color: darkcyan;">6 Columns</div> <div class="columns small-6" style="height: 50px; background-color: darkcyan;">6 Columns</div> </div> </div> </div> 

The story-grid class does nothing except change font color and add some height for demo purposes. The result is this:

This almost exactly what I want except -- I still want gutters. If I remove the collapse class it looks like this:

I am hovering over the content section to show how the internal grid system is overflowing it parent's boundaries. So how do I get the result I got above without collapsing my gutters?

Answer 1

I was able to get this to work. Remove collapse from everything and add this to your css .row .row { margin: 0; } .row .row { margin: 0; }

Foundation adds a negative margin on nested rows and it changes with screen width, but depending on exactly what you want to achieve, I think this will do it.

I also edited your post from @media max-width: 600px to min-width: 600px , because it didn't look like your screenshots.