Two column layout, fixed right column

Question

I am stuck with a seemly simple two column CSS layout. Typically this layout is simple but I am building a responsive site and need the columns to collapse in the correct order for mobile, on top of each other.

On desktop, I need the right column to be fixed size, say 200px and the rest of the area to be taken up by the left column. Naturally I need the columns to clear and push content below down.

On mobile, they would just stack. So the left column is above the right column.

As mentioned before, this type of layout is usually accomplished simply by floating one of the columns and/or setting large margins, but this approach requires the left and right to be swapped in the document flow and would make the collapsed mobile version impossible.

I have even looked at display table and table-cell, this works relatively well for the most part, but unfortunately FireFox does not support absolute positioned elements within the layout breaking some of the content within.

I'm a seasoned developer, surly accomplishing this should be simpler that I am finding?

Hey, I updated the answer with another option that takes care of all your conditions — George Yates, Dec 13 '13 at 06:45

score 6 · Accepted Answer · answered Dec 13 '13 at 12:15

Not a very elegant solution, but its working. They key is to wrap the contents of the left column and add a margin-right equal to the width of the right column / sidebar. On the right column, set the width and a negative margin-left equal to its width.

.left {
    float:left;
    width:100%;
    background-color: green;
}
.left-content {
    margin-right:120px;
}
.right {
    float:right;
    width: 120px;
    margin-left: -120px;
    background-color: red;
}

Here's a working fiddle http://jsfiddle.net/heyapo/9Z363/

Thanks Apo... yours looks to be the most compatible solution. — DigitalJohn, Dec 13 '13 at 13:42

score 3 · Answer 2 · edited Jun 20 '20 at 09:12

Option 1:

You can use absolute positioning, margins, and box sizing to achieve what you're looking for. See this JSFiddle for an example, with the code below. Just change the margin on the left column, the width on the right column, and the breakpoint to what fits your purpose.

HTML:

<div class="wrap">
    <div class="left">
        Left
    </div>
    <div class="right">
        Right
    </div>
</div>

CSS:

.wrap {
    position: relative;
}

.left {
    -webkit-box-sizing: border-box;
    -moz-box-sixing: border-box;
    box-sizing: border-box;
    margin-right: 60px;
    background-color: green;
}

.right {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    background-color: red;
}

@media only screen and (max-width: 500px){
    .left {
        margin: 0;
    }
    
    .right {
        width: auto;
        position: static;
    }
}

Option 2:

See this option, using calc() as a width on the left column, and a clearfix on the wrap, we can use floated columns with a fixed right column that will push down the content below it.

HTML:

<div class="wrap">
    <div class="left">
        Left
    </div>
    <div class="right">
        Right with a ton of content
    </div>
</div>
Here's some pushed down content

CSS:

.wrap {
    position: relative;
}

.left {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    width: calc(100% - 60px);
    background-color: green;
}

.right {
    float: right;
    width: 50px;
    background-color: red;
}

@media only screen and (max-width: 500px){
    .left {
        width: auto;
        float: none;
    }
    
    .right {
        float: none;
        width: auto;
        position: static;
    }
}

.wrap:before,
.wrap:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.wrap:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.wrap {
    *zoom: 1;
}

Thanks George! Though this solution fails on one of my criteria. The right column does not push content down and can overlap the content below, only the left one. E.g. check this [fiddle](http://jsfiddle.net/2LXKB/) — DigitalJohn, Dec 12 '13 at 07:38

score 0 · Answer 3 · edited May 23 '17 at 12:08

0

I'm not sure if you're building this responsive site from scratch or using a library such as Twitter Bootstrap to do so, that would be my first question.

Secondly, if the table-cell option worked well across all but Firefox, you could write some Mozilla specific CSS using the answer found here: mozilla specific css

This would allow you to tweak just the CSS for FireFox. There are also plenty of FF specific CSS extensions here: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions

edited May 23 '17 at 12:08

Community

1
1

answered Dec 12 '13 at 00:17

ben.kaminski

986
3
13
24

This is interesting. But unfortunately the issue FireFox is causing is too great and I simply need to stop using display: table-cell etc. Thanks. – DigitalJohn Dec 12 '13 at 07:52

score 0 · Answer 4 · answered Dec 12 '13 at 01:17

0

A possibility is <div class="visible-xs"> So you build your stuff the way you want and then use this in case of a mobile. Wouldnt recommend though =D

answered Dec 12 '13 at 01:17

kristjan reinhold

2,038
1
17
34

I am not using Bootstrap. Thanks. – DigitalJohn Dec 12 '13 at 07:50

Two column layout, fixed right column

4 Answers4

Option 1:

Option 2:

Linked