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/

Answer 2

Just set the #nav div to have a fixed width (the total width of the contained elements) and set display to block. Then clear your floats after the elements to keep the #nav div surrounding them. Don't use table-cell as the display.

CSS

#nav { display: block; width: 416px; }

HTML

<div id="nav">
<div id="bark"></div>
<div id="profile"></div>
<div id="read"></div>
<div id="write"></div>
<div style="clear: both;"></div>
</div>

Answer 3

Try this

#nav{
    padding:10px;
    background-color:rgb(77,77,77);
    display: inline-table;
    vertical-align:middle;
    width: 70%;
    margin-left: 15%;
}

check this fiddle

Answer 4

change your container div to display: table not table-cell and add margin: auto

http://jsfiddle.net/3j5kc/

#nav{
    padding:10px;
    background-color:rgb(77,77,77);
    display: table;
    margin: auto;
    vertical-align:middle;
}