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:

<body>

        <div id=“page”>

            Monotonectally …

            <div id=“sidebar”>

                Efficiently …

            </div>

        </div>

</body>

 

 

… and the CSS is quite simple, too:

<style>

* {

-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;

}

</style>

The working demo here.

129 Newbury Street, Suite 400
Boston, MA 02116