Split page scrolling behaviour in HTML

Question

So I have a page that is split into 2 columns. The left column there are expandable forms that are quite long to ask the user optional product preferences. On the right side of the page there is a much shorter, 'contact details' form.

The contact details form is mandatory while all the left product preferences forms are optional. The behaviour idea is that as the user scrolls down to complete the left column optional forms, the page will only scroll the left column - the contact details forms displayed in the right column stay in place beginning. I'm having trouble implementing this and I haven't found a solution yet or any examples of pages with this split column behaviour online.

Any advice / suggestions? Thanks!

Answer 1

You can put the contents of the longer (left) column in a container div, and make that div independently scrollable using the overflow attribute.

Here's a sample.

Answer 2

Depending on how involved your layout is, you can use css fixed positioning so that as the page scrolls down, your right column stays in the same place.

Sample.