Space Between: Column Alignment Simplified
Creating a clean and polished column layout in WordPress can be tricky, especially when your content varies in length. One common issue is misaligned buttons when using Kadence Blocks — they often end up uneven across columns, making the layout look messy.
In this article, we will show you a simple and effective way to align all buttons to the bottom of their respective columns — regardless of the content above.
Step 1: Set Column Height to 100%
- Start by selecting the Row Layout block that contains your columns.
- Go to the Advanced section to find Structure Settings of the Row Layout.
- Toggle “Inner Column Height: 100%” to ensure all columns stretch evenly. This ensures each column uses the same vertical space.
Step 2: Separate Content and Button
Now we need to separate the main content from the button so we can position them independently:
- Inside each column, insert a new Section at the top.
- Drag all the content (except the button) into this new section. Leave the button outside, below this content section.
- You now have two distinct elements inside the column:
- A section with your main content (text, image, etc.)
- A button sitting directly below it
Step 3: Apply Flex and “Space Between”
This is where the magic happens.
- Select the parent section that contains both your content section and the button.
- Enable the Flex Layout for that section.
- Access the Flex Settings under the General tab
- As soon as you do this, the button will jump to the bottom of the column, while the content stays at the top.
- This layout behaves like a flex container, perfectly distributing space between the top content and the bottom button.
Final Touches
Repeat this process for all your columns. Once done:
- All your buttons will be aligned at the bottom.
- The content will look tidy and structured.
- Your design will feel much more professional and balanced.
Tutorial Video
Updated on: 26/09/2025