I need to design a layout with three columns, where the left column has a fixed width and the middle and right columns each take up 50% of the remaining space. It is also important that the left and right columns do not scroll along with the page.
I have managed to partially accomplish this in two different ways. The initial method successfully creates dynamic columns, but unfortunately, the right sidebar ends up scrolling with the page. This was achieved by having a fixed position for the left column and another fixed position container that takes up the entire page. The right sidebar was then placed in the second container with a width set at 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 issue with the current layout is that content scrolls due to #main {overflow: auto}. Ideally, I want the content to scroll with the main page instead.
The non-scrolling solution is fairly straightforward, involving fixed left and right sidebars with static widths.
I prefer to achieve this using only CSS if possible.