I have a page layout that requires two containers/boxes on top of each other and a third that will be positioned to the right of them and be the height of the first two. See the rough graphic in case that’s not clear.
If I use 1/2 columns, I can’t specify a class or ID for each column so I can try to position them and remove the padding/margins around each of the three boxes (I need no gap/margin between each of them). If I use a Color Section, I can apply a ID to that, but lose the option to specify the width of the column.
Can anyone recommend the best approach to do that? I’ve been trying a few different things and thought I would look for some suggestions rather than spin my wheels for a few more hours. Thanks!
I made some progress with this by using a grid row set to have two 1/2 columns. In the left I placed two 1/1 columns (one on top of each other) for the two smaller/stacked containers. In the right I placed a single 1/1 column. That seems to work. Only I need the two on the left to span the entire height of the single container on the right. Right now I have all three set to “Equal Height”. I suspect a setting like that is what I’m looking for, but I haven’t had any luck yet.
Thanks for the screenshot, could you post a link to the site in question as well please?
Sure, the URL is in the private content. The containers I’m referring to are the ones with the “Track Your Cargo”, “Global Connectivity” and “Port Operations Centre” headers. Everything is working pretty good now, except I need to get the “Port Operations Centre” container to span the entire height of the other two combined. Depending on the size of your screen you will get a gap under that container or the “Global Connectivity” container.
I was able to get the background to span the height of the two stacked containers in the tall one beside it by setting the background in that grid column to stretch to fit.
The topic ‘Position Three Containers With One Spanning the Height of the First Two’ is closed to new replies.