center align three divs side by side with CSS

I've got three divs side by side in a container that sets itself to the width of the user's window.

I want them to stay nested next to each other, and centered as a unit in the dynamic container.

I'd like to do this without putting them into another div (mostly because I have a lot of them in this page as it is).

HTML:

<div id="content">
    <div id="nav_one">
        <h3>COLLECTIONS</h3>
        <p style="text-align:justify">blahbla开发者_JAVA技巧h</p>
    </div>
    <div id="nav_three">
        <h3>COLLECTIONS</h3>
        <p style="text-align:justify">blahblah</p>
    </div>
    <div id="nav_two">
        <h3>COLLECTIONS</h3>
        <p style="text-align:justify">blahblah</p>
    </div>
</div>

CSS:

#nav_one {
    width: 208px;
    float: left;
    padding: 20px 10px 20px 10px;
    text-align: center;
}

#nav_two {
    width: 208px;
    margin: 0 auto;
    padding: 20px 10px 20px 10px;
    text-align: center;
}

#nav_three {
    width: 208px;
    float: right;
    padding: 20px 10px;
    text-align: center;
}

Ok, after the comment below, I have a better idea what you are looking for, with the caveat of the container div's requiring 208px. I don't think that margin: auto will here to center all three in a group, so I propose float: left and use jQuery to calculate #content div, subtract .container widths, and divide by two to get left margin for the left-most .container div.

.container {
    width:208px;
    float:left;
    padding:0;
    margin: 0 auto;
    text-align:center;
    background-color: #cccccc;
}
.container p {
    text-align:justify;
    padding: 20px 10px 20px 10px;
}

$(document).ready(function(){
    var w = $('#content').width();
    var calw = (parseInt(w) - (208*3))/2;
    $('#left').css('margin-left',calw+'px');
});

<div id="content">
    <div class="container" id="left">
        <h3>COLLECTIONS</h3>
        <p>blahblah</p>
    </div>
    <div class="container">
        <h3>COLLECTIONS</h3>
        <p>blahblah</p>
    </div>
    <div class="container">
        <h3>COLLECTIONS</h3>
        <p>blahblah</p>
    </div>
</div>

EDIT To take into account the fixed-width 208px div containers, I think the easiest way to do this would be to use a little bit of jQuery:

$(document).ready(function(){
    var w = $('#content').width();
    var calw = (parseInt(w) - (208*3))/2;
    $('#left').css('margin-left',calw+'px');
});

Here's a jsfiddle to demonstrate the effect (updated with the above).

Of course, at this point, you might very well be better off using a container div with a margin auto applied to it, and a width of the 3 contianer div's you have with it. Of course, this approach causes problems in IE due to a bug in the way margin: auto is handled.

.container2 {
    width:208px;
    float:left;
    padding:0;
    margin: 0 auto;
    text-align:center;
    background-color: #cccccc;
}
.container2 p {
    text-align:justify;
    padding: 20px 10px 20px 10px;
}
#content2 {
    width: 624px;
    background-color: #ccccaa;
    margin: 0 auto;
}

<div id="content2">
    <div class="container2">
        <h3>COLLECTIONS</h3>
        <p>blahblah</p>
    </div>
    <div class="container2">
        <h3>COLLECTIONS</h3>
        <p>blahblah</p>
    </div>
    <div class="container2">
        <h3>COLLECTIONS</h3>
        <p>blahblah</p>
    </div>
    <br style="clear: both;"/>
</div>

Showing both.

If I understand correctly you are trying to center the 3 divs class container inside the div id content. Width of your container div determines the spacing of your 3 nesting divs, if you want them closer together simply adjust the width of the container div. If your container div happens to be a fixed width use padding to push content around inside.

use this:

#content {
    width: 684px;
    margin:0 auto;
}

#nav_one, #nav_two, #nav_three {
    width: 208px;
    float: right;
    padding: 20px 10px;
    text-align: center;
}

Its generally a bad idea to use fixed width measurements in your css. Set your width measurements using a percentage and then restrict them using px measurements with min-width and max-width. This will allow the most portability to various screen sizes.
Basically what you are doing is micro-managing. By using percentages instead you allow the browser to render your content more easily.

Recent comment from @gollum18, so here's a better answer than all of the above.

HTML

<section>
    <div class="third center-align"></div>
    <div class="third center-align"></div>
    <div class="third center-align"></div>
</section>

CSS

section {
    text-align: center;
}
    .third {
        width: 33.333%;
        width: -webkit-calc(100% / 3);
        width: -moz-calc(100% / 3);
        width: calc(100% / 3);
    }
    .center-align {
        display: inline-block;
        text-align: left;
    }