Floating Layer Height Change and Layout Grid

[protectourlands]

I have a floating layer set full width, Background: image, contained. The image scales nicely at all widths with the height changing as it narrows.

I have a layout grid below it. How do I get the layout grid to float upward to the changing height of the floating layer as it gets smaller as the page narrows?

[Pablo]

The layout grid should automatically float. This is default behavior.

[protectourlands]

Hi Pablo

Unfortunately the grid is not floating to the varying layer height. It doesn't because I believe the floating layer sets a fixed height even though it is set to "contain". Here is the html generated for the layer:

Code: Select all

<div id="topimage" style="position:relative;text-align:center;width:100%;height:441px;float:left;clear:left;display:block;">
</div>

So as the background image shrinks (contain), the layout grid below it stays positioned at the fixed height of the floating layer above it (441px). At least I think this is what is happening but I could be wrong. The other way around would work (grid on top of floating layer) because the grid has a tick to set the column height to "auto".

I've tried every setting in the layer to achieve auto height. If I use a grid instead and contain the top image and set column to "auto" everything works, but I really need a layer for more complex layering of objects I cannot do with grid.

[Pablo]

This has nothing to do with the layout grid.
By design, layers have a fixed height.

If you need a flexible height then you can override the height with custom code.

[protectourlands]

This has nothing to do with the layout grid.

Exactly and this is what I have discovered. It is the fixed height of the layer that is keeping the grid from floating upward.

If you need a flexible height then you can override the height with custom code.

Can I do this in the Object HTML > Custom Style?

[Pablo]

You can add the following custom style to the layer:

Code: Select all

height: auto !important;

[protectourlands]

Unfortunately that didn't work. Thank you for explaining all this though. I'll try a different design.

All the best to you

[Pablo]

I think this should work.
Did you add it in the custom style section?

[protectourlands]

I added it to the floating layer Object HTML > Custom style

The resulting code is

Code: Select all

<div id="Layer1" style="position:relative;text-align:center;width:100%;height:442px;float:left;clear:left;height: auto !important;">
<div id="Layer1_Container" style="width:1650px;height:442px;position:relative;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;text-align:left;">
</div>
</div>

[Pablo]

The code seems ok. But depending on the browser it may ignore the inline style, even though it's set it marked as important.
You can try using a global style instead.

[protectourlands]

I even tried directly editing the CSS after publish and that did not work either.

Changed

Code: Select all

height:442px

to

Code: Select all

height: auto

No worries. I changed the format to "cover" so the height stays the same.

I really appreciate the time you took to look at this Pablo.