Varying width navigation links filling up 100% of parent container space

[jimmy]

Hi!

Actually right now I just seek the answer for the last post since I ditched the original idea and decided to stick to table-cell.

Old question:

What I need to achieve is the following:
I have a nav container set to max-width: 1350px and 8 anchor links inside of it floated to the left. My initial idea was to set their width to 12.5% (and then 25% by media queries) to make them fill the container nicely, but two of those links wrap the text. Since I cannot vertically align that without resorting to table-cell hacks, which is acting quirky with dropdown menus (strange white borders are showing), is there any method to make them auto-fill the container? I know flexbox is capable of it, but browser support repels me at this point (correct me if I’m wrong and I should totally go for it).

The way I see it is the horizontal padding on each of those elements would auto calculate based on the container width. I’m quite sure it can be done with Javascript, but… should I?

Big thanks in advance!
Jim

[jimmy]

You’re right, sorry. Fixed.

[jimmy]

Yes, it works fine unless text is longer than calculated width from 25%. It breaks to a new line then, which forces me to use table-cell method. However, if I nest another ul inside of an li, I get strange white border in the place of it, even if I absolutely position it off the screen.

http://codepen.io/anon/pen/GrqyA – example.

[Author]

Posts