50% + 50% width > 100% – Why?

Hello Webflow community! :slightly_smiling:

My design has been working flawlessly until today.

The issue I’m encountering is that when I put two inline iitems (like buttons) and give them 50% width each, one of them drops down on the next line. It shows nicely up in Webflow: http://puu.sh/o26A1/13a78334b5.png

You can see the issue here:
http://designerhjelme.dk/sa-let-er-det

Why is that?


Here is my public share link: LINK
(how to access public share link)

Try to type in 50 VW rather than 50%. Hope this works and fixes the solution. :wink:

Hey @Curting thank you so much for reaching out! Excellent question :smiley:

When you’re applying those 50% width styles, the browser still needs to be told to Float those items left or right. :smiley:

So if you apply a Float: left style to both of those buttons you’ll also be able to remove the 10px of margin on top of the left button :smiley: and this should stop the line break from happening.

​Please let me know if this solves the problem, if not, I’m happy to help further :smiley:

4 Likes

Wow, thank you so very much for the quick replies, VLAD and Waldo!
It’s a great help! :slightly_smiling:

2 Likes

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.