Right Aligned Floating Group on Page Expansion

[boston85719]

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.

[eli]

Hi @boston85719, if you haven’t done this already, put all your page elements into a single container group. Then underneath the floating group (to the right of the main container group), put a standard fixed width group the same width as the floating group.

Like this:

The spacer group will provide you with a consistent margin on the right side making it appear as though the main content is pushing against the floating group.

[boston85719]

Hi @eli thanks for replying

That unfortunately isn’t working for me.

When I do that I get the same behavior as I did before. The center colored groups are overlapping the floating group

This is the page view

This is set up in editor

Seems like the floating group is rogue and isn’t adhering to any type of set margin rules.

[boston85719]

@eli you got me thinking and I solved this issue

What I did was to resize the floating group. Originally I had it set to width of 280 px with a 20px margin on right (page) and left (centered colored groups).

What I did was to set the width of the floating group to 320px so that it took up the entire space. The floating group is set to fixed width.

I placed inside of it a group with fixed width of 280px and centered it in the floating group.

Now the centered colored groups never encroach on the group set in the floating group and maintain the 20px margins.

Cheers

[eli]

Make sure you are setting the float position relative to top and right and you are using fixed width.

It should operate exactly like this (I left the spacer group above the floating group for better visuals)

http://www.giphy.com/gifs/fYenBKCzm3FgnkCh1t

[eli]

Ugh, the GIF isn’t working but I see now you have it working how you need. Good luck!

@boston85719

isn’t adhering to any type of set margin rules.

Yes, you will be much less frustrated working in Bubble if you create container groups and control the margins inside them rather that trying to set margins on the page.