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

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.