CSS fill remaining width

Question

I have this header bar    lt div id  header  gt           lt div class  container  gt               lt img src  img logo png   gt               lt div id  searchBar  gt                   lt input type  text    gt               lt  div gt               lt div class  buttonsHolder  gt                   lt div class  button orange inline  id  myAccount  gt                      My Account                  lt  div gt                   lt div class  button red inline  id  basket  gt                      Basket  2                   lt  div gt               lt  div gt            lt  div gt       lt  div gt    I need the searchBar to fill whatever the remaining gap is in the div  How would I do this   Here s my 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

User · Accepted Answer

You can realize this layout using CSS table-cells.

Modify your HTML slightly as follows:

<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>

Just remove the wrapper element around the two .button elements.

Apply the following 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;
}

Apply display: table to .container and give it 100% width.

For .logoBar, #searchBar, .button, apply display: table-cell.

For the #searchBar, set the width to 90%, which force all the other elements to compute a shrink-to-fit width and the search bar will expand to fill in the rest of the space.

Use text-align and vertical-align in the table cells as needed.

See demo at: http://jsfiddle.net/audetwebdesign/zWXQt/

User · Answer

Use calc   https   jsbin com wehixalome edit html css output  HTML    lt div class  left  gt    100 px wide     lt  div gt  lt  -- Notice there isn t a space between the divs   see edit for alternative  -- gt  lt div class  right  gt      Fills width     lt  div gt    CSS    left     display  inline-block    width  100px     background  red    color  white     right     display  inline-block    width  calc 100  - 100px      background  blue    color  white      Update  As an alternative to not having a space between the divs you can set font-size  0 on the outer element

User · Answer

I would probably do something along the lines of   lt div id  search-logo-bar  gt  lt input type  text   gt  lt  div gt    with css  div search-logo-bar       padding-left 10       background  333 url logo png  no-repeat left center      background-size 10     input type  text         display block      width 100       DEMO  http   jsfiddle net 5MHnt

User · Answer

I know its quite late to answer this  but I guess it will help anyone ahead   Well using CSS3 FlexBox  It can be acheived  Make you header as display flex and divide its entire width into 3 parts  In the first part I have placed the logo  the searchbar in second part and buttons container in last part  apply justify-content  between to the header container and flex-grow 1 to the searchbar  That s it  The sample code is below    x000D   x000D   header   x000D    background-color   323C3E  x000D    justify-content  space-between  x000D    display  flex  x000D    x000D   x000D   searchBar  img  x000D    align-self  center  x000D    x000D   x000D   searchBar  x000D    flex-grow 1  x000D    background-color  orange  x000D    padding  10px  x000D    x000D   x000D   searchBar input   x000D    width  100   x000D    x000D   x000D   button   x000D    padding  22px  x000D    x000D   x000D   buttonsHolder  x000D    display flex  x000D    x000D   lt div id  header  class  d-flex justify-content-between  gt  x000D       lt img src  img logo png    gt  x000D       lt div id  searchBar  gt  x000D         lt input type  text    gt  x000D       lt  div gt  x000D       lt div class  buttonsHolder  gt  x000D         lt div class  button orange inline  id  myAccount  gt  x000D          My Account x000D         lt  div gt  x000D         lt div class  button red inline  id  basket  gt  x000D          Basket  2  x000D         lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Include your image in the searchBar div  it will do the task for you   lt div id  searchBar  gt       lt img src  img logo png    gt                       lt input type  text    gt   lt  div gt

User · Answer

This can be achieved by wrapping the image and search bar in their own container and floating the image to the left with a specific width    This takes the image out of the  flow  which means that any items rendered in normal flow will not adjust their positioning to take account of this   To make the  in flow  searchBar appear correctly positioned to the right of the image you give it a left padding equal to the width of the image plus a gutter   The effect is to make the image a fixed width while the rest of the container block is fluidly filled up by the search bar    lt div class  container  gt     lt img src  img logo png   gt     lt div id  searchBar  gt       lt input type  text    gt     lt  div gt   lt  div gt    and the css   container     width  100       container img     width  50px    float  left      searchBar     padding-left  60px

User · Answer

I did a quick experiment after looking at a number of potential solutions all over the place  This is what I ended up with   http   jsbin com hapelawake

[css] CSS fill remaining width

Examples related to css