I am having an issue with a floating group that I want to be on the right side of the page. I have the page set up to be not fixed width so that I can make use of the responsive settings.
Everything is working as I want, except the floating groups. When the page is expanded the groups in the center of the page begin to overlap the floating group on the right.
The empty box with border is the floating group. The red and yellow boxes are groups that are centered on the page and set to not fixed width and no maximum width.
In the responsive settings there isn’t anything that really helps as floating groups are pretty limited in the choices. And so the only things I can do to play with the floating group settings are causing the floating group to be in a strange position on page expansion.
When the floating group has the fixed width then it is on the correct side, but again, the issue is that the colored groups in the center are expanding and the margin between the colored groups and floating group gets distorted. Not only is the margin between the colored center groups and the floating group getting smaller and eventually the colored groups overlap the floating group, but the right margin between the floating group and page is getting larger.
This is how it looks when the page width is 1200, which is what I set the page width to in the editor. I had aligned and sized elements so that the floating group on the right ( width 280 ) is at a 20px margin from the right side of page and the colored center groups.
I think that what is going on is that bubble is keeping the margins fixed for the colored groups in the center of the page, however the margins for the floating group are not maintained.
Any ideas of how to fix this issue?
One thought I am having now is something I don’t necessarily want to do, which is to set the page width to a higher width ( say 2400px instead of 1200px ) and just hope that when the elements are resized that margins will remain same as most people won’t be using a screen width as large as 2400px to view my site.
The problem with that is it would cause my colored groups to be larger than I want as this is a blog and colored groups will contain text.
My other thought was to set the page width to not be fixed as I already have it, but to put a maximum width as a percent of current but that is not possible like it is with groups and other elements.
Another idea I had was to put everything that is not a floating group into a group but that didn’t help.