Center Positioning two divs (one is dynamic in width) inside container - css

Question

How would you center position two divs inside a container when one is 'dynamic'? That is, the search input in content-top-search changes width from 226 to 462 when you click inside it.
Here's my CSS code:
.content-top-buttonsearch-holder {
text-align: center;
float: left;
width: 816px;
margin-left: 15px;
}
.content-top-buttons {
height: 31px;
width: 269px;
float: left;
margin-right: 16px;
}
.content-top-search {
height: 31px;
float: left;
}
Here is my HTML:
<div class="content-top-buttonsearch-holder">
<div class="content-top-buttons">
<a id="all_events_button" href="#" title="Click to show all events happening!"></a>
<a id="all_venues_button" href="#" title="Click to show all venues in our database!"></a>
<a id="event_finder_button" href="#" title="Click to search for events!"></a>
</div>
<div class="content-top-search">
<input name="venue-search" class="searchbox" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'sort parties by venue name':this.value;" value="sort parties by venue name" />
</div>
</div>

Answer 1

<div style="border: 1px solid green; margin: 10px;">
<div style="margin: 10px auto; width: 50%; border: 1px solid red; text-align:right">center 1</div>
<div style="margin: 10px auto; width: 80%; border: 1px solid magenta; text-align:left;">center 2</div>
</div>
what's really the 'magic' is the margin-left|right: auto in the inner divs. Also they have to have a width.
edit
This will not work with floats
edit2
Try disabling the float on .content-top-search Maybe that is what you want.
edit3
http://jsbin.com/ukuqas/5 has another solution
there you have a outer container with text-align: center and an inner container with display: inline-block This inner container containes the buttons and the search box. All float is prohibited.