Responsive Sidebar - almost solved!

[linzlee]

Hi, I see many people talk about placing a sidebar that’s responsive to page height however the viewport is.
I have tried a few things, and this is the closest to what I ultimately wanted, but still need some help to hopefully resolve one critical issue.

About my set-up:
I want to have a sidebar that will always be on the left side, and an information area on the right, both responsive to viewport’s height and width.
I have managed this part so far by putting 2 floating groups on the page, which are the grey and yellow parts in the gif below.
The grey floating group has a 40% minimum width, and the yellow floating group has a 30% minimum width.
Preset page width is full width.

The critical issue I have now is that when the page width changes:

1. the sidebar shrinks, the yellow part doesn’t stick to it and a gap will show between them (the pink strip);
2. or on a smaller screen (cell phone), I guess the 2 groups overlap and you don’t see the pink gap anymore, looks ok but still not ideal.

Question:
Is there a way to stick these 2 floating groups together so that there’s no gap between them while browser page width changes?
Or, another way to have both parts of the page responsive without using floating groups?

p.s. I tried these things that didn’t work:

1. using a full-page floating group with child groups and elements on them (the giant floating group would not be responsive to page height anymore);
2. grouping the floating groups (there will be an error).

Cheers.

[kyleforkey]

Hey there I went ahead and gave this a shot and was able to achieve it by using a group for the side bar and setting that to a fixed width. then I had a group next to it taking up the remainder of the width of the page with a fixed group inside that which was centered and contained the rest of the elements.

[linzlee]

Hi, I don’t think that would work for me though.
I need the side bar to fill page height, no matter ho tall the page is, and only floating groups would do that (vertically float relative to both), and that’s why i’m using 2 floating groups.
And setting fixed width doesn’t work because the sidebar would be too wide on mobile, very little space left for the content area on the right, that’s why sidebar needs to be responsive width-wise.
Cheers.