Menu icon Foundation
Fixed width sidebar + fluid content?

Having a really hard time making this work. In this particular case I need a fixed-width left column (large-3, medium-3, no small) then a fluid/responsive content column (large-9, medium-9) for the remainder.

Problem is, when scaling down the browser window, the content column is wrapping/being forced down below the sidebar way too early. Obviously the width of the fixed sidebar is interfering with the grid's responsiveness.

Does Foundation accommodate this kind of nav element or will this call for a CSS hack?

<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>

fixed widthsidebargridstatic

Having a really hard time making this work. In this particular case I need a fixed-width left column (large-3, medium-3, no small) then a fluid/responsive content column (large-9, medium-9) for the remainder.

Problem is, when scaling down the browser window, the content column is wrapping/being forced down below the sidebar way too early. Obviously the width of the fixed sidebar is interfering with the grid's responsiveness.

Does Foundation accommodate this kind of nav element or will this call for a CSS hack?

<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>
Jonathan Smiley over 5 years ago

The Foundation grid is based on percentage sizes, so what's happening in your code is that your sidebar is 300px wide and your content column is still 75% wide. As soon as 75% of your row is no longer available (with a 300px sidebar that would be once the row is < 1200px wide, 75% would require 900px) it'll drop down due to lack of space.

Foundation does not by default support a fixed width sidebar like that, so you will need to do something custom. Most solutions for this sort of thing are pretty hacky – if you're not worried about older browser Flexbox applied to two custom elements in a row would make this very simple, otherwise you could either absolutely position the left column and then have a 12-colujmn content block with a 300px left padding applied to occupy the space. There are a few solutions, feel free to reply back if you need more direction.

Designer over 5 years ago

Yeah absolute positioning with the other div padded is about the least offensive/hacky solution. I didn't want to start involving a whole other system (Flexbox?) for just one element...

I understand Foundation's structure and raison d'etre, but do you think structural items like this might eventually become integral features, rather than relying on JS/3rd party/etc addons?

Jonathan Smiley over 5 years ago

Yes – future versions of Foundation will be better suited to this kind of app-like functionality. In various, secretive ways. Stay tuned.

Jacob Button almost 4 years ago

I'm new to foundation and just got my hands on the new foundation 6 for sites release candidate. is this type of functionality now available with the new flex grid system?

if so, how would I go about that. Ideally I'd like a fixed sidebar navigation on the left with a width of say 200px and a fluid content area to the right of that for normal sized screens. On smaller screens I'd like to hide the static sidebar navigation in favor of off-canvas navigation.