nav bar wrapping on smaller resolutions

Question

I\'m trying my hand at HTML5/CSS3 as a learning process but I\'m struggling to create a navigation bar for links to other sections across my pages. I adapted the code from a tut

Answer 1

You almost did it correctly. The problem with your css is that white-space: nowrap; only works for inline elements - but you are using float. Floated elements become block-level even if you set display: inline; property to such an element (it will not be applied). So - if you replace your floats with display: inline-block; - your white-space property will work :)

A live example of inline-blocks and white-space can be seen here: http://jsfiddle.net/skip405/wzgcH/

As for your centering method - there is a better solution. (You may remove the padding and set the proper width) Especially if you are using inline-blocks. Simply set text-align: center; on their parent - and you'll have it centered.