One-column layout with fluid sidebar and max-width main column

Question

I'd like to have a one column layout where the text body should have a maximum width of say 30em, but it should be as wide as possible (up to 30 em).

The left margin (the empty space between the left edge of the text body and the left edge of the browser window) should be at most 6em, and shrink if necessary (on smaller screens).

The right margin should use the rest space that's available.

I have seen this question: I need a max-margin CSS property, but it doesn't exist. How could I fake it? - but I don't understand how to use it in my case. This is what I have tried (http://jsfiddle.net/y2rd8/1/)

<div class="left"></div>
<div class="right"></div>
<div class="body">
A wonderful serenity has taken possession of my entire soul,
</div>
<div style="clear: both;" />

and

.left, .right {
    background: gray;
}

.left {
    float: left;
    max-width: 6em;
}
.right {
    float: right;
    width: auto;
}

.body {
    max-width: 30em;
    border: 1px solid green;
}

score 3 · Accepted Answer · answered Mar 27 '13 at 13:49

3

I'd go with something like what you have, but maybe get away from the floats and eliminate .left and .right altogether, then use media queries to manage the left margin:

http://jsfiddle.net/y2rd8/9

.body {
    max-width: 30em;
    border: 1px solid green;
    margin-right: 1em;
}
@media screen and (max-width: 480px) {
    .body {
        margin-left: 2em;
    }
}
@media screen and (min-width: 481px) {
    .body {
        margin-left: 4em;
    }
}

answered Mar 27 '13 at 13:49

isherwood

58,414
16
114
157

Not really beautiful :)) (I wish I had a smoother transition without javascript) but the way I now now. Many thanks! – topskip Mar 27 '13 at 14:29

score 0 · Answer 2 · answered Jun 30 '14 at 08:48

Use a media query with size of max width of content plus two times the max width of the margin.

.body {
    max-width: 30em;
    border: 1px solid green;
    margin: auto;
}
/* 42em = 30 + (2*6) */
@media screen and (min-width: 42em) {
    .body {
        margin-left: 6em;
    }
}

http://jsfiddle.net/schettino72/j9HpH/1/

One-column layout with fluid sidebar and max-width main column

2 Answers2