css - 3-column layout with non-scrolling fluid-width sidebars (jsFiddle) -

i looking create three-column layout left column fixed width , middle , right columns each 50% of remaining width. want left , right columns non-scolling.

i have achieved partial success in 2 different ways. the first creates fulfils dynamic columns goal right sidebar scolls page. did fixed position left column , fixed position container take whole page. put right sidebar in second container width set 50%.

<section id=leftsidebar>     <p> leftsidebar </p> </section>  <div id=main>      <section id=middle>         <article> middle </article>         <article> middle </article>         <article> middle </article>         <article> middle </article>         <article> middle </article>         <article> middle </article>         <article> middle </article>         <article> middle </article>         <article> middle </article>         <article> middle </article>         <article> middle </article>         <article> middle </article>     </section>      <section id=rightsidebar>         <p> rightsidebar </p>     </section> </div> 

another problem above layout content scrolls result of #main {overflow: auto}. ideally content scroll main page.

the non-scrolling code comparatively trivial , involves fixed left , right sidebar static width.

i achieve css if @ possible.

use css calc() function

fiddle

the trick here setting both middle , right cols 50% of remaining space.

you calc():

#middle, #rightsidebar {     width: calc(50% - 40px); /* equals half of 100% - 80px */ }