Can't get the box sizing right

Hi there,

can you set the Grid Container vertical alignment to default, then i can take a look at whats required.

Hi David,

I changed the vertical alignment of the outer grid container to default, the inner one has already been standard.
Hope I did this correctly.

BTW: I tried to solve my design approach with the grids. Maybe a positioning using relative and absolute property would be more successful. What do you think?

BR
Klaus

I wouldn't use absolute positioning as it removes the element from the DOM content flow, so it no longer occupies space in the layout, meaning column heights will collapse and things will overlap.

First thing to do is clean up the Layout. You have an additional Container Block inside the right hand column:

https://www.screencast.com/t/gutd2LNtR9

Not sure why that is required ? As all Columns have a Container Block inside them by default.
Can that be removed as its going to just cause us a headache :)

ok, I got rid of the additional container. But is still not working. Sorry for my ignorance David, I appreciate your help a lot.

Is it possible that my problem derives from the fact, that the flex items (called by background color) lightgrey box, grey box and darkgrey box sit in their own container (lightgrey box) or another grid (grey box and darkgrey box)?

Looks like this becomes more a teaching in flex boxes rather then GP......

BR
Klaus

I am still seeing that extra container :)
Can you make sure its removed and any caches are cleared.
Once thats changed i can provide the CSS to position the bottom blocks.

please find attached the structure of how I have set up the page. Please mark what you want me to delete.

https://postimg.cc/PvmGJnt4

I will install cachify to clear the cache....

ok... cache should be cleared and I have once again rearranged the boxes. The new layout is now:

https://postimg.cc/fk8csQNY

Still too many divs???

Many thanks
Klaus

Hi Klaus,

Give this CSS a try:

.gb-container.gb-container-4ada87c5 > .gb-inside-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.gb-grid-wrapper.gb-grid-wrapper-7cda56d1 {
    height: 100%;
}

Let me know :)

Hi Ying,

this works. I wonder a lot why this container you address with the rule

.gb-container.gb-container-4ada87c5 > .gb-inside-container {
height: 100%;
display: flex;
flex-direction: column;

exists at all or why it doesn't already have these properties (at least display flex and flex-direction). Is this a bug or do I misunderstand something???

I had the idea with the height myself in the second container. But obviously it didn't work without the first CSS instruction.

Maybe you want to answer, if not (I understand that your days are busy :-)) you can close the subject.

Many thanks once again
Klaus

It might be worth you adding an Additional CSS Class to each of those Containers. Instead of relying on the auto generated unique IDs. ie.

.gb-container.your-custom-container-class>.gb-inside-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gb-grid-wrapper.your-custom-button-wrapper-class {
    height: 100%;
}

Then give your Right hand column container the: your-custom-container-class
And the Button wrapper: your-custom-button-wrapper-class

We don't add the CSS by default as messes with the vertical alignment options and can mess other things up.
We're looking at adding these kinds of options to GB - once we figure out a good UI :)