Fluid Layout With Fixed Width Sidebar

Hi Guys,

I was looking the other day for a solution that will allow me to have a fixed width block as sidebar (to the right) and a responsive block for main content.

The most interesting approach I found was to add a margin (equal to the desired width for the sidebar plus some gap) to the main block and position the sidebar relative (actually in absolute position) to the main block, with a negative right value.

The layout should look like this:
Screen Shot 2014-11-04 at 11.52.53 AM

The HTML is quite obvious:


        <div id=“page”>

            Monotonectally …

            <div id=“sidebar”>

                Efficiently …






… and the CSS is quite simple, too:


* {

-webkit-box-sizing: border-box;/* Safari/Chrome,other WebKit */

-moz-box-sizing: border-box;/* Firefox,other Gecko */

box-sizing: border-box;/* Opera/IE 8+ */


body, html {

margin: 0;

padding: 10px;

line-height: 1.4em;


#page {

margin-right: 300px;

position: relative;

border: solid 1px #ddd;

padding: 10px;


#sidebar {

position: absolute;

top: 0;

width: 280px;

right: -300px;

min-height: 100%;

border: solid 1px #ddd;

padding: 10px;



The working demo here.