Configuring 2 column checkout page

I'm trying to get my head around the use of separators in the checkout workflow configuration. The client wants the cart summary in the right column and everything else in the left. While I can achieve this I can't see how to have the height of the items in the right column independent of the left. For example, if there are many products in the cart on the right, there is a lot of space under the payment section. Essentially what I have achieved is a grid layout when I wanted a column layout. Images below

OK, I found a solution but I'm not sure is is a good coding solution. In css I set a max height of 300px for the cart and set overflow to visible. It works but feels a bit like a hack. Is there a better way?

Hi,

First i think you shouldn't use so many seperators in one step. Basically you want to add one seperator between left and right columns only. So in you case you should add seperator between your cart block and other blocks.

So what it does, it moves cart block to the right and other views to the left.

Now, adding max height to reduce the hight of the cart is good practise here. However you scrollbar on the right should be visible and some text showing how many items in cart should be somewhere near "cart summary" so if the user has 4 items and u set max height to show only 2, the user while looking to the cart will see scrollbar and how many items he has in the cart, will understand that he needs to use scrollbar to see other items. So UI/UX is good here.

Now, on mobile it is different story. You should get rid of the scrollbar because people intend to scroll to bottom on mobile and having another vertical scroll is not good practise from UI/UX. IHowever if user have like 20 items in cart the cart block could be to long...What you want is to make items display inline and add horizontal scroll or add some button where on click it will show hes cart...Where are other things which could be done for better UI/UX but it is long story tho...

Hope that helps a bit.

Regards

What you are describing is what I was trying to achieve however having a single vertical seperator means all of the following elemeents get pushed to the right as well. The css I described only applies to screens over 990. You are correct that this would be a mess on a mobile otherwise.

Thanks Nicolas, that's what I've done. The fixed height with overflow visible seems to be the best solution.