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.