Fixed-width sidebar with responsive content column in Foundation 5? - zurb-foundation

Question

I've been using Foundation since v3 and so I hadn't expected this kind of snafu.
In this particular case I need a fixed-width left column (large-3) then a fluid/responsive content column (large-9) for the remainder.
<div class="row">
<div class="large-3 columns" id="sidebar" style="width: 300px">
sidebar
</div>
<div class="large-9 columns" id="content">
content
</div>
</div>
Problem is, when scaling down, the content column is wrapping/being forced down below the sidebar (even before the next screen-width threshold is crossed). I tried "fixed" and "sticky" classes in the #sidebar but they don't seem to affect this behavior.
I didn't want to start hacking the CSS if there was an existing (Foundation?) solution.

Answer 1

Much like #naota's approach, the response I got from Zurb was to hack the css. Set an absolutely-positioned, fixed-width sidebar, then create a new div with left-padding: 300px;
Something like:
<div class="row">
<div id="sidebar" style="position: absolute; width: 300px;">
</div>
<div class="large-12 columns" id="content" style="padding-left: 300px">
</div>
</div>
It works surprisingly well...for a hack.

Answer 2

Here's what I use with SASS to create fixed column widths.
Code
#mixin fixed($width, $direction) {
position: absolute;
width: rem-calc($width) + $column-gutter;
top: 0;
#if $direction == left {
left: 0;
} #else {
right: 0;
}
}
#mixin fluid($width, $direction) {
#if $direction == left {
padding-right: rem-calc($width) + ($column-gutter * 1.5);
} #else {
padding-left: rem-calc($width) + ($column-gutter * 1.5);
}
}
Using the code
To insert a fixed, 300px, right column, add #include fixed(300, right); to the right column class, and #include fluid(300, left); to the left column class. Do not mix with the default small-# column classes.
Extending the code
If you'd like to setup permanent classes, similarly to small-3 column, large-6 column, etc, just add the following code. You will now be able to use large-fluid-300-left for the left fluid column and large-fixed-300-right for the right fixed column.
// Fixed 300px
.row { position: relative; }
#media #{$small-up} {
.small-fixed-300-left.column { #include fixed(300, left); }
.small-fixed-300-right.column { #include fixed(300, right); }
.small-fluid-300-left.column { #include fluid(300, left); }
.small-fluid-300-right.column { #include fluid(300, right); }
}
#media #{$medium-up} {
.medium-fixed-300-left.column { #include fixed(300, left); }
.medium-fixed-300-right.column { #include fixed(300, right); }
.medium-fluid-300-left.column { #include fluid(300, left); }
.medium-fluid-300-right.column { #include fluid(300, right); }
}
#media #{$large-up} {
.large-fixed-300-left.column { #include fixed(300, left); }
.large-fixed-300-right.column { #include fixed(300, right); }
.large-fluid-300-left.column { #include fluid(300, left); }
.large-fluid-300-right.column { #include fluid(300, right); }
}
Bonus - Set Minimum Widths
If you're working with Ads, you'll likely come across a point, where you'll need the column to collapse into its own row, once it reaches a certain minimum width. Here's what I use to set minimum column widths.
Code
#mixin min($width) {
width: $width + px;
float: left;
box-sizing: content-box;
+ .column {
float: left;
}
}
Using the code
Add #include min(300); to a column class. Must be used in addition to the column class.
Extending the code
The following code allows you to add classes, such as .small-min-300.column to columns which you wish to collapse, if they are every squeezed below 300px.
// Min 300px
#media #{$small-up} {
.small-min-300.column { #include min(300); }
}
#media #{$medium-up} {
.medium-min-300.column { #include min(300); }
}
#media #{$large-up} {
.large-min-300.column { #include min(300); }
}
I've pulled this directly from my SASS file and haven't tested the code at the time of writing. Let me know if something doesn't work as expected.

Answer 3

I faced a similar issue. The code below uses display:table to wrap your code into two parts.
CSS:
<style type="text/css">
.wrapper_table{
display: table;
width:100%;
}
.wrapper_row{
display:table-row;
vertical-align:top;
}
.wrapper_cell{
display:table-cell;
vertical-align:top;
}
</style>
HTML:
<section class="wrapper_table">
<div class="wrapper_row">
<div class="wrapper_cell">
<!-- your side bar is here -->
<div class="columns" id="sidebar" style="width:300px;">
sidebar
</div>
</div>
<div class="wrapper_cell">
<div class="row">
<!-- your content is here -->
<div class="large-12 columns" id="content" >
content content content content content
content content content content content
</div>
</div>
</div>
</div>
</section>
Hope this helps.

Answer 4

In case anyone found this old article recently trying to find a way to have a fixed-width column in Foundation, I was able to do this with Foundation 6. I'm using the Flex-Grid, and there is a wonderful class called .shrink. Shrink will make the column only as wide as it's contents, so you can have an element in there like a nav item or image, and the column will stay that width as other column around it take up the remaining space. I was able to do a fixed-width center column thusly:
<div class="row">
<div class="columns"></div>
<div class="shrink columns">
This will shrink to it's contents - set a width on something here!
</div>
<div class="columns"></div>
</div>
Official Foundation doc page for the .shrink class:
https://codepen.io/ZURBFoundation/pen/aWYVgd