What's the Proper way to achieve 3-Column layout with fluid center

Question

I am working on a 3-column layout with two fixed-width sidebars (left and right) and a fluid center. I have followed A List Apart's Holy Grail article, and, although this works fine in most browsers, I am having some problems in Internet Explorer 7+.

The problem with IE 7+ actually doesn't stem from this technique, but rather from the fact that the page is rendering in quirks mode. If I make it render in standards-compliance mode, however, many outdated elements become displaced and would require a complete re-writing.

Given that this article dates a few years, is this the most up-to-date reference on the subject? Or should I be applying a different technique?

Any insight on the best way to do this will be greatly appreciated.

score 20 · Accepted Answer · answered Jul 26 '11 at 03:21

20

There's really no point in floating the columns.

HTML:

<div id="wrapper">
    <div id="left"></div>
    <div id="center"> Center content</div>
    <div id="right"></div>
</div>

CSS:

#left {
    position:absolute;
    left:0;
    width:50px;
    height:100%;
    background-color:pink;
}

#center {
    height:100%;
    margin: 0 50px;
    background-color:green;
}

#right {
    position:absolute;
    right:0;
    top:0;
    width:50px;
    height:100%;
    background-color:red;
}

body, html, #wrapper {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}

Demo: http://jsfiddle.net/AlienWebguy/ykAPM/

answered Jul 26 '11 at 03:21

AlienWebguy

76,997
17
122
145

What will your layout do, if the left (or the right) column is higher than content? Where would be your footer? – Arsen K. Jul 26 '11 at 03:32
Above and below the wrapper, in a new wrapper. – AlienWebguy Jul 26 '11 at 03:37
1

Easy workaround to an obnoxiously long rail ;) http://jsfiddle.net/AlienWebguy/ykAPM/3/ – AlienWebguy Jul 26 '11 at 04:26
1

This works *except* for the fact that if you set a `min-width` on the center column the right column will float over the top of it when the browser is resized. Any ideas on how to prevent that from happening? – aroth Nov 27 '12 at 05:58
1

Why set a `min-width` on the center column at all? If you care about overlap, set the min-width on the `#wrapper` or the `body` instead. – AlienWebguy Nov 27 '12 at 16:13
This doesn't work in cases where you don't want a full-width layout, by the way. – TylerH Oct 22 '15 at 18:12
It's not hard to adapt for that use case, simply set `position : relative; margin : auto` on the `#wrapper` and then you can set the width to whatever you want. – AlienWebguy Oct 26 '15 at 17:55

score 4 · Answer 2 · answered Mar 28 '13 at 14:20

The absolute positioning works for a full width page but what about when you have a fixed width that is centered. Came up with a solution based on flex-box that works in IE8+. The flexie polyfill is used for older browsers

See http://jsfiddle.net/lorantd/9GFwT/10/

<div id="header"></div>
<div id="main">    
    <div id="menu"></div>
    <div id="content"></div>
    <div id="summary"></div>
</div>
<div id="footer"></div>

#header {
    background-color: #9B9EA7;
    height: 70px;
}

body {
    min-width: 500px;
    max-width: 630px;
    margin-right: auto;
    margin-left: auto;
    display: block;
}

#main {
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    display:-webkit-box; /* Safari and Chrome */
    display:box;
    width: 100%;
}

#menu {
    background-color: #D42108;
    width: 120px;
    margin-top: 10px;
    margin-right: 10px;
}

#content {
    background-color: #FFD700;
    height: 500px;
    margin-top: 10px;
    margin-right: 10px;
    -webkit-box-flex: 2;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 2;         /* OLD - Firefox 19- */
    width: 60%;               /* For old syntax, otherwise collapses. */
    -webkit-flex: 2;          /* Chrome */
    -ms-flex: 2;              /* IE 10 */
    flex: 2;   
}

#summary {
    width: 30px;
    margin-top: 10px;
    background-color: #9B9EA7;
}

#footer {
    background-color: #353535;
    width: 100%;
    height: 50px;
    margin-top: 10px;
    clear: both;
}

score 0 · Answer 3 · answered Apr 12 '13 at 13:48

I believe this should be useful in most cases.

Please see link below.

http://jsfiddle.net/ykAPM/278/

#left {
position:fixed;
left:0;
width:50px;
height:100%;
background-color:pink;
}

#center {
margin: 0 50px;
background-color:green;
overflow:auto
}

#right {
position:fixed;
right:0;
top:0;
width:50px;
height:100%;
background-color:red;
}

body, html, #wrapper {
width:100%;
height:100%;
padding:0;
margin:0;
}

#test{
height:1000px;
}

What's the Proper way to achieve 3-Column layout with fluid center

3 Answers3

Linked