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.