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

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

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

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

You can realize this layout using CSS table-cells   Modify your HTML slightly as follows    lt div id  header  gt       lt div class  container  gt           lt div class  logoBar  gt               lt img src  http   placehold it 50x40    gt           lt  div gt           lt div id  searchBar  gt               lt input type  text    gt           lt  div gt           lt div class  button orange  id  myAccount  gt My Account lt  div gt           lt div class  button red  id  basket  gt Basket  2  lt  div gt       lt  div gt   lt  div gt    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

[css] CSS fill remaining width

Examples related to css