70

I have this header bar. I need the element named 'middle' to fill whatever the remaining gap is in the div. How would I do this?

header {
  background: red;
}

#middle {
  background: orange;
  display: inline-block;
}

#right {
  background: green;
  display: inline-block;
}
<header>
  <img src="https://picsum.photos/100"/>
  <div id="middle">222</div>
  <div id="right">333</div>
</header>

4
  • searchbar to fill remaining gap in container div,is this what you mean?
    – Sid M
    Sep 23, 2013 at 14:38
  • Yeah that's what I'm after
    – TMH
    Sep 23, 2013 at 14:41
  • 3
    If you know the (fixed) width of the other siblings, you can use the calc() method in CSS3 to specify the width of the searchbar. Otherwise, I'm afraid you might have to rely on JS to do that.
    – Terry
    Sep 23, 2013 at 14:50
  • 1
    relevant stackoverflow.com/a/22719552/759452
    – Adriano
    Jan 27, 2015 at 10:05

8 Answers 8

74

Use calc!

https://jsbin.com/wehixalome/edit?html,css,output

HTML:

<div class="left">
  100 px wide!
  </div><!-- Notice there isn't a space between the divs! *see edit for alternative* --><div class="right">
    Fills width!
  </div>

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.

3
  • please note that as long as this is only aimed towards desktops it will do fairly ok in compatibillity, but there are some mobile issues, giving a global availability of 82% of used browsers as i'm writing this. Source: caniuse.com/#search=calc
    – Brian H.
    Nov 17, 2016 at 17:21
  • 8
    What if you don't know width of left element? I have dynamic width of left element for example. Sep 30, 2017 at 14:32
  • You don't need to keep divs without spaces if you add float: left (or right) to one of classes (.left or .right)
    – Ch3shire
    Jan 7, 2018 at 21:08
61

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/

4
  • Not tested yet but the demo seems like exactly what I needed, thanks!
    – TMH
    Sep 23, 2013 at 16:54
  • 17
    Heh. So under the bonnet, we've come back around to using tables for layout. ;-) Aug 8, 2014 at 6:11
  • 1
    @MichaelScheper Pretty much, yeah... Until they put some kind of "star" notation into the CSS standard to say "I want A to be 300px wide, and I want B to fill whatever is left".
    – molson504x
    Oct 22, 2015 at 13:31
  • 4
    A lot of the time, it's possible with Flexbox... but also a lot of the time, it's not. Oct 26, 2015 at 5:41
16

It can be achieved using flexbox.

Make your container element (in your case header) use display: flex. In the element you want to be full width, use flex-grow: 1.

header {
  background: red;
  display: flex;
}

#middle {
  background: orange;
  flex-grow: 1;
}

#right {
  background: green;
}
<header>
  <img src="https://picsum.photos/100"/>
  <div id="middle">222</div>
  <div id="right">333</div>
</header>

2

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.

<div class="container">
  <img src="img/logo.png"/>
  <div id="searchBar">
    <input type="text" />
  </div>
</div>

and the css

.container {
  width: 100%;
}

.container img {
  width: 50px;
  float: left;
}

.searchBar {
  padding-left: 60px;
}
1

in css:

width: -webkit-fill-available
0
0

I would probably do something along the lines of

<div id='search-logo-bar'><input type='text'/></div>

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/

0

Include your image in the searchBar div, it will do the task for you

<div id="searchBar">
    <img src="img/logo.png" />                
    <input type="text" />
</div>
-1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.