Trouble adding equally spaced headers in a column cell

Hello everyone!

First off, this is my first website design ever, and I’m loving the challenge, and am finding Webflow a joy to work with! However I’m stumped on how to achieve my designed effect…

I have a four column span on the top edge of my page, equally distributed along the length, filled with various header texts. The fourth cell (far right) is however proving to be difficult.

I want “Instagram · Contact · Reset” to be spaced out evenly in the top right hand corner

Problem is that the words Instagram, Contact, and Reset have to be set as a header text to get the underline (which is a border)

I can’t figure out a way to get them to nicley space out evenly, currently each is housed in a div block of their own, if I don’t use a div block everything appears on top of eachother.
Using div blocks worked but the whole thing was far too spaced out and everything I’ve tried to alter this has broken the equal distancing.

Here is a mockup of what I’m trying to achieve: Imgur: The magic of the Internet

And this is my read-only link: https://preview.webflow.com/preview/jrgn-net?utm_medium=preview_link&utm_source=designer&utm_content=jrgn-net&preview=fbe5b686ea251a9803cc133ff028f9f4&mode=preview

Thanks for your time!

Hi James,

this project looks really complicated, so I’m not sure if this is exactly what you wanted:

I used text boxes, but you can use headings to get those underlines as well.
Also, I’m not sure if you need the column element, to me it looks like it complicates things, but maybe you have a usage I’m not aware of. If that’s not the case, navigation bars can be built easier, like here.

I simply put a Div next to the column element, inserted the three words + two dots as text blocks (works with h3, etc. as well), and made the Div a flexbox. Then giving the class of the text boxes a margin, you can space the elements out as much as you want to. They are then evenly spaced automatically.

The structure I used looks like this:

section

More about Flexbox here.

Hope this helped!

Cheers
Leon

Hi Leon,

Wow! What a fantasic response, thanks so much! Now it’s exactly how I imagined it!

I guess I should have started with a navigation bar rather than columns, as like you mentioned, the columns have no further use, regardless - I’ve follwed you advise about adding the Div as a flexbox, and it’s work a charm.

Now I’m gonna try and adapt this to mobile :slight_smile: :grimacing:

THANKS A ZILLION!

1 Like