How to center div while keeping inside divs on same line in css?

Question

I want to center the #nav div on the page. Inside I want the other divs to stay on the same line together separated by my 10+10px margin as is so far. I don't want the inside divs to collapse on separate lines while shrinking the page too small..

http://jsfiddle.net/tH2cc/789/

<iframe width="100%" height="300" src="http://jsfiddle.net/tH2cc/789/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

http://jsfiddle.net/tH2cc/789/embedded/result/

Answer 1

Try this:

• Take out float:left from the embedded divs
• Add white-space:nowrap; display:inline-block; to your container div

Here's modified version: http://jsfiddle.net/9e4hX/