This quick tutorial is for anyone struggling with floating items inside of columns in Thrive Architect (or Thrive Leads).

For the longest time I thought this was a glitch, but I think this may be working as intended. Here's the problem.

Can't Float Icons and Images Inside of Columns in Thrive Architect

If you put an image or an icon inside of a column, then try to float it left or right aligned, you'll quickly notice the object doesn't move or respect the float. 

I tried forcing margins, custom CSS fixes, absolute positioning (which can work in some cases, but it's not ideal), and even manually putting in spaces. Nothing worked!

Then I realized the solution was much simpler.

Use a Thrive Content Box to fix alignemnt and float issues

SOLUTION: Properly Float Icons and Images Using a Content Box

Step 1: Put a content box inside the column.

Step 2: Add your image, icons, and text into the content box.

Step 3: Go to Layout & Position and set your Alignment.

Step 4: under Layout & Position expand the Advanced tab, and press the check next to Float.

Your content will now successfully float within the column!

That's it! That's really all there is to it.

Whenever in doubt about how you should organize your objects in Thrive Architect, always try placing elements within a content box first. This follows the 'outside-in' design philosophy of making changes to container elements before making changes to the actual elements themselves, and also makes duplicating and organizing your page's elements much easier. 

If you have any questions, feel free to leave a comment.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Need Personalized Help?

Let's talk about your project! If it's a small, quick coaching or training that you need I have coaching rates available. For larger projects and do-it-for-you services let's book a consultation and see how I can help.

__CONFIG_colors_palette__{"active_palette":0,"config":{"colors":{"62516":{"name":"Main Accent","parent":-1}},"gradients":[]},"palettes":[{"name":"Default Palette","value":{"colors":{"62516":{"val":"var(--tcb-skin-color-0)","hsl":{"h":215,"s":0.46,"l":0.01}}},"gradients":[]}}]}__CONFIG_colors_palette__
Request a Free Consultation