Fluid multi column layout where sidebar and margins stays fixed width, without javascript

More fluid layout examples ahead. First I was like hmm... sure need js to that. But of course not!

I was working on a layout with a lot of narrow columns and a sidebar. First I did it like this.

Problems in that approach:

  • Margins are define in percentage so they vary depending on the width of the window, we don’t want that
  • On low resolutions the sidebar gets too narrow and the list in it wraps, ugly.

What we want:

  • Fluid width columns
  • Static width sidebar
  • Static width margins

See in the fiddle what I mean →

Elementary HTML and CSS

Here’s what we’re doing, check the comments in the code.

The HTML:



Fixed width sidebar in a fluid layout

Some content here

Some content here

Some content here

And the CSS:


.wrap{width:100%;}
    /* Margin in the inner wrapper */
    section{font:normal 13px/1.4 sans-serif; margin:20px;}

/* Right margin width of the sidebar */
.article-wrap{margin:0 193px 0 0;}
    /* Float the columns and give width depending on how many you have them */
    article{float:left; width:33%;}
        /* Apply margins and paddings to the inner element */
        .inner-article{background:LightGoldenRodYellow; margin:0 20px 0 0; padding:10px;}


/* Position the sidebar absolutely */
aside{background:Aquamarine; height:350px; position:absolute; top:74px; right:20px; width:200px;}
    /* Again paddings and margins in the inner element */
    .inner-sidebar{padding:15px}




/*Just to make is pretty*/
header{margin:20px; width:100%;}
h1{font:bold 25px/1.4 sans-serif;}
h2{font:bold 18px/1.4 sans-serif;}
p{margin:10px;}
ul{list-style:disc; margin:0 0 0 17px;}
​

The key here is to wrap elements. Check the full code in the fiddle.

Club-Mate, the beverage → club-mate.fi