3

Firstly, sorry about the mouthful that is the title.

I'm trying to make a responsive navigation with fluid container and different sized items. I need to know if it's possible (if so how) to keep the spacing between the items the same size for all items while keeping the first and last items flush to the edge of the container.

Desired outcome Resized Result

The red illustrates the spacing, which should be the same between all elements

I can do something like the above with a fixed width pretty easily, but as soon as the window is resized, I can't seem to get the gaps to grow/shrink to the right size.

Percentage margins would seem to be the answer to this but because the container can resize but the items inside cannot, the items either spread onto the next line if the window is too small or not reach the end of the line if the window is too big. I've also tried making the elements a fixed width and then text-align:center; but the spacing not what the designers want.

Has to be compatible with all of the modern browsers and IE 7+

Here's a (badly made) fiddle: http://jsfiddle.net/GGwdW/

Jamie Taylor
  • 4,709
  • 5
  • 44
  • 66
  • 2
    +1, showed some effort. – STT LCU Jul 25 '13 at 15:10
  • 1
    Check this solution, might be helpfull: http://stackoverflow.com/questions/11589590/text-align-justify-inline-block-elements-properly – Sergey Kochetov Jul 25 '13 at 15:15
  • @SergeyKochetov: That works great, am I right in thinking this won't work in IE7, due to the lack of `:before` and `:after`? - I'm getting to the point now where if it looks a bit odd for IE7 users, they'll be used to it. Thanks! – Jamie Taylor Jul 25 '13 at 15:25
  • 1
    That [solution](http://stackoverflow.com/questions/11589590/) can be made to work in IE7, I think. Here's another similar [solution](http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs/6880421#6880421) which includes IE7 compatibility. – thirtydot Jul 25 '13 at 15:32

1 Answers1

2

Check this solution, might be helpfull: "text-align: justify;" inline-block elements properly?

For old IE's there's text-align-last property.

Community
  • 1
  • 1
Sergey Kochetov
  • 390
  • 1
  • 7