Menu icon Foundation
fixed-width sidebar, grid only used inside a single table-cell

Hi there!

I got a custom layout with a full height sidebar on the left and a content area on the right (built with css table-cells). The sidebar has a fixed width (e.g. 170px) and the content area has a fixed max-width (e.g. 790px).

I would like to use Foundation5 inside the content area only. Is it possible to use the grid system in such a restricted environment? Changing $row-width to remcalc(790) gave me weird results. I guess I have to customize the media queries too.

I'm aware that I'm using F5 not in the way it was designed for, but maybe someone else here has already tried the same and can give me some tips.

sidebarwidthtable-cellgrid

Hi there!

I got a custom layout with a full height sidebar on the left and a content area on the right (built with css table-cells). The sidebar has a fixed width (e.g. 170px) and the content area has a fixed max-width (e.g. 790px).

I would like to use Foundation5 inside the content area only. Is it possible to use the grid system in such a restricted environment? Changing $row-width to remcalc(790) gave me weird results. I guess I have to customize the media queries too.

I'm aware that I'm using F5 not in the way it was designed for, but maybe someone else here has already tried the same and can give me some tips.

Rafi Benkual over 4 years ago

Why table cells? You can make a fixed width sidebar without table cells. Something like http://foundation.zurb.com/forum/posts/21166-check-out-this-sidebar-off-canvas-icon-menu

armin over 4 years ago

I used table-cells because I also wanted an enclosing header and footer and I also wanted the whole thing centered on larger displays (no growing distance between sidebar and content!). For the latter I need margin: auto, which won't work with fixed positions.

But thanks for the link. Your solution is quite elegant!