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
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 */ }
Comments
Post a Comment