Question

I want to have different layouts like [left|content|right] and [left|content] or [content|right] when using the fluid layout the gutter between the “cells” is also fluid and has a percentage value. But I would like to have a fixed width for the gutter like 10px or 20px between the left/right and content areas.

Any suggestion how to make this work? I’ve already tried it but ended always up with wildly shifting elements.

Answer 1

Answered a question like this before, what it basically came down too was creating a set of classes to offset the main container depending on how many sidebars you have, like so:

CSS

.fixed-fluid {
    margin-left: 240px;
}
.fluid-fixed {
    margin-right: 240px;
    margin-left:auto !important;
}
.fixed-fixed {
    margin: 0 240px;
}

Demo, edit here.