I'm writing this article in response to an hour of frustration spent in trying to get 2 container to align horizontally, when they are placed side by side. I spent over an hour in analysis and I'm hoping to save others from this frustration.
The context of the problem is that I had a contain of 2 columns which consisted of 2 single column containers. Both containers had "display title" checked to label their sections. The problem is that the container on the left side was twice the thickness of what I expected and it included 2 icons to expand/contract. The container on the right failed to align with it. See the image:
I know this is a cosmetic issue, and the form worked fine. But I also knew that I'd take support calls on it for months on end from users who were irritated by the problem. So I vowed to fix it. I won't bore with everything I tried which failed, but I will explain what's going on.
It appears that the first container in a form which "displays their title" receives an extra icon to expand/contract. It is this extra icon that results in a thicker container label. (FWIW, the top expand/contract icon will operate on ALL containers in the form! The lower icon only works on the individual container.)
I fixed this by putting in a container at the top of the form with "Display Title" checked. I added text to the title with instructions on how to use the form.
The result was perfectly aligned containers!
I hope this article keeps you from falling into this pit.
