[解決済み] CSSで残りの幅を埋める

質問

このようなヘッダーバーがあります。

<div id="header">
        <div class="container">
            <img src="img/logo.png"/>
            <div id="searchBar">
                <input type="text" />
            </div>
            <div class="buttonsHolder">
                <div class="button orange inline" id="myAccount">
                    My Account
                </div>
                <div class="button red inline" id="basket">
                    Basket (2)
                </div>
            </div>

        </div>
    </div>

divに残った隙間をsearchBarが埋める必要があります。どうすればいいのでしょうか？

以下は、私のCSSです。

#header { 
    background-color: #323C3E;
    width:100%;
}

.button {
    padding:22px;
}


.orange {
    background-color: #FF5A0B;
}

.red {
    background-color: #FF0000;
}

.inline { 
    display:inline;
}

#searchBar {
    background-color: #FFF2BC;
}

解決方法は？

このレイアウトは、CSSのテーブルセルを使って実現することができます。

以下のように、HTMLを少し修正します。

<div id="header">
    <div class="container">
        <div class="logoBar">
            <img src="http://placehold.it/50x40" />
        </div>
        <div id="searchBar">
            <input type="text" />
        </div>
        <div class="button orange" id="myAccount">My Account</div>
        <div class="button red" id="basket">Basket (2)</div>
    </div>
</div>

を囲むラッパー要素を削除するだけです。 .button 要素を使用します。

以下のCSSを適用します。

#header {
    background-color: #323C3E;
    width:100%;
}
.container {
    display: table;
    width: 100%;
}
.logoBar, #searchBar, .button {
    display: table-cell;
    vertical-align: middle;
    width: auto;
}
.logoBar img {
    display: block;
}
#searchBar {
    background-color: #FFF2BC;
    width: 90%;
    padding: 0 50px 0 10px;
}

#searchBar input {
    width: 100%;
}

.button {
    white-space: nowrap;
    padding:22px;
}

適用 display: table に .container で、幅を100%にします。

について .logoBar , #searchBar , .button , 適用 display: table-cell .

については #searchBar そうすると、他のすべての要素が縮小してフィットする幅を計算し、検索バーが残りのスペースを埋めるように展開されます。

必要に応じて、テーブルのセルでtext-alignとvertical-alignを使用します。

でデモをご覧ください。 http://jsfiddle.net/audetwebdesign/zWXQt/