Equal Height

You can make two or more columns equal in height by applying the equal-height class to their direct parent group.

For the sake of example we have this layout with three columns of variable height:

Act2 Unequal Column Sample

Act2 Template Builder Unequal Column Sample

So we can apply the equal-height class to their direct parent group (in this case, the Centered wrapper), or we can group them once more and apply that class to the new group, which we are going to do in our example:

Act2 Template Builder Equal Height Group

Act2 Template Builder Equal Height Edit CSS

Act2 Template Builder Equal Height CSS Class

Act2 Equal Height Sample

Advanced Equal Height

If your section contains elements that are not at the same level in your layout (they are not direct children of the same group), but you still want to make them equally tall, then you need to take a different approach.

Act2 Template Builder EQH Items

Instead of the equal-height class you would use eqh-container for your group:

Act2 Template Builder EQH Container Edit CSS

Act2 Template Builder EQH Container CSS Class

Then add the eqh-item class to all elements in your group that need to have the same height:

Act2 Template Builder EQH Item Edit CSS

Act2 Template Builder EQH Item CSS Class

Using Act2.1 with the new Design Tools? Read this documentation.