Can't get my group at 100% width + margin

Please see the image.
My goal is to make the selected group (Group G) always be from the sidebar to the full right of the screen, both with 20px margins. However, the righ side doesn’t go the way I planned. What am I doing wrong here? Why is there no 20px margin on the right side?

NB. When I preview, I see the same.

When you have 100% width, you can’t have margins without the entire group shifting outside of its parentgroup. What you should do is give its parentgroup a padding of 20px.

Let me know if that helps!

I tried this. Unfortunately, it did not work.
I added the padding on the parent group. is there something wring with my other settings?

See screenshot of both groups (“group” and “parent group”):

Ah I think see your issue. Algemeen group cannot be 100% min or max width if you are giving it a 200 margin. It’s going to get the width of the entire page AND move 200px to the right.

The Fix:
Set your page container layout type to row. Make an empty group that is the same width of the floating group to the left (for example 15%. Use percentages, it is very important here) and same height of Algemene group. This group would be right below the floating group. Now for Algemene group, you’re going to give it a fixed width of 85% (100%-15%). Don’t give it any left or right margins.

Now instead of shifting the entire 100% width 200px to the right, it will instead be located 15% to the right. And its width will fit on the page because it’s only 85% wide.

You can’t just give Algemene group a width of 85% without adding a 15% wide group below the floating group, because you can’t do margins in %.

Don’t give group G any margins either, use paddings in Group Algemeen. But you seem to be doing that just fine!

Also a tip: if you are going to have both min width and max width be 100%, it helps to just do fixed width of 100% :slight_smile:

Hope this solves your issue. If it doesn’t, please let me know!


Hey, I think I have a quick solution for you. First, give your page a row layout and have your sidebar as a floating group to the left. Give it a max width say 30% of the whole page. Next, have group G or its parent have a max width of 70% and have it align to the left. Avoid using margins and instead, use padding. You cannot give group G or its parent a max width of 100% while you have the sidebar occupying the page as well. If you need a demo, then ping me. I hope that helps.

Thanks. I think I have found an even easier solution: in group algemeen, I set the left and right margins to 0px, and added the values to the paddings. So I have 225px left and 25 px right now as paddings, and this seems to work fine!
There is only one downside: i dont see my floating group (the sidebar) anymore in de editor. Only when I make group Algemeen invisible.
Thanks again!

1 Like