OL Learn

Getting a second container to snap to a variably sized first container

Hi all,

New Connect designer user.

I have two related issues that I’m looking for assistance with please.

I have a container that is to hold a variable sized address block - the address block varies in the amount of lines used. I believe that the container that holds the address block is currently a static size, the maximum it would need to be to contain a the largest possible address block. I don’t understand how to make the container size adapt to fit the address block at it’s current size.

I’m attempting to get a second container that holds text to adapt it’s position based on the size of the first container. I need it to remain always 5mm (when printed) from the first variably size container.

I don’t see any features/functions for these details, and I barely know any html.
I’m not asking for anyone to figure this out for me - but if anyone could explain how this works, or what I need to look at - I’d be grateful.

The html for the address block container currently has set height/width - which is what I’m basing my assumption that it’s static on.
I can add the html if allowed/anyone requests it.

Thanks,
Jamie.

HTML has a general concept of flow whereby elements naturally move in relation to others. There are exceptions to this, but overall that Flow is how you’ll want to structure documents.

Take this simple example here: https://jsfiddle.net/oxfucvdm/

I’ve placed two boxes (Divs) in the body, one after the other. By default HTML wants to squish these together so that one appears immediately following the other. But this can be controlled by adjusting the spacing between elements. In this case, I set the bottom margin to 100px to relay that I want a gap there. Feel free to set different values for the margin to see how it moves.

Note too that the boxes automatically fit the text. I’m not doing anything special there. You can add or remove lines and those boxes will adjust to the contents.

Now, one of those exceptions I mentioned: Absolute positioned boxes. When this is set, an element appears exactly where you tell it to, regardless of the underlying HTML structure. The Div might be the last bit of code in the page, but it appears as a box in the upper left corner. It also has no impact on the rest of the HTML: An absolute Div can overlay other elements without moving them. Effectively, making absolute elements move according to the elements around them requires some level of scripting.

Depending on the template, you may wish to keep everything in line, or in the flow. Each element appears after the next and spacing is added where appropriate. In other cases, it may be simpler to drop a positioned box on the page and put one or more elements inside of it. This gives you a box that can be easily placed, while also allowing elements inside the box to adjust to each other as needed.