3 columns, diff width, centered on main column?

I was able to get this to work after a TON of fiddling but trying to figure out the PROPER way. I have a section at the bottom of my page. It has 3 columns that each have images in them I want the center image to be in the center of the page. Normally it will center the entire 3 columns and since the image in the left column is larger…it makes it off center.

You can see where I accomplished it on bottom - but in my visual editor right now it’s all messed up as I try to learn the right way to do it. (also can’t undo now so have to fix it lol)

If you look here:

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

I personally would simply not use columns and use divs set to absolute position for the center and using floats for the side ones. You of course then have to modify those styles for mobile.

1 Like

In the end I got rid of the columns, used divs in a flex container. It works…but crude. I think your way might have been better but I don’t think I will change it now :slight_smile:

What would be the way you do your suggestion, for future reference? I seem to have so much issue with knowing what to set (inline, flex etc then also absolute etc)

Still learning.

I haven’t had the best of luck with flex box so i try to avoid it and use floats and absolute positioning when it does the job. Some people swear by flex box but I just don’t trust it to work everywhere. Check out some of the videos at https://university.webflow.com for tips on how to work in webflow

So been messing with that and it’s working…sorta. I decided for an exercise to try to make “Corners” on these divs with images. It worked however there’s a 1 pixel line/gap on the right side of the frame…I can’t seem to solve it.

I used 16.65% for left, 66.6% for middle, 16.65% for right.

Look here on the TEST page.

Your link is broken. Usually pixel issues can be solved by putting an outer glow shadow and making it solid.