Make an inline-block div take 100% of the remaining width

Question

I have 3 div blocks inside another div.

What I wanted to do is to put them inline, but the first 2 div blocks should take a width according to their content and the last div take the remaining space.

<div class="container">
    <div class="red">Red</div>
    <div class="green">Green</div>
    <div class="blue">Blue</div>
</div>

I try to avoid the use of fixed widths because I need to use this in a responsive design.

How can I make the blue div in this fiddle take the rest available space of its parent and act responsive if the screen is resized?

set everything to `display: block` and float the first two divs to the left. the remaining non-floating div will take up the rest of the space. — Ennui, Jul 30 '13 at 19:34

score 12 · Answer 1 · answered Aug 03 '16 at 21:49

12

float: left the red and green and the blue get width: clac(100% - 100px)

.blue {
    width: calc(100% - 100px);
}

http://jsfiddle.net/6kLVn/190/

answered Aug 03 '16 at 21:49

URL87

10,667
35
107
174

score 8 · Accepted Answer · answered Jul 30 '13 at 19:39

8

I believe if you don't want to specify any pixel or percentage widths at all and make the red and green containers only as wide as their content, you will need to wrap them inside their own container, named .left below:

<div class="container">
    <div class="left">
        <div class="red">Red</div>
        <div class="green">green</div>
    </div>
    <div class="blue">blue</div>
</div>

If you now float .left to the left, and also float .left div to the left, you now no longer need to specify any inline-block elements. The blue container will simply take up as much space as it has available until the end of the .container.

.left {
    float: left;
}

.left div {
    float: left;
}

Fiddle

Edit

Silly me, the .left container is obviously not needed as long as you just add float: left to your red and green blocks, just like @Ennui said above in the comments :)

Updated fiddle

answered Jul 30 '13 at 19:39

Elise

5,086
4
36
51

1

This solution has one flaw - background is not floated, so if you give the "filler" element background it will also be under floated element :) There is a solution - https://stackoverflow.com/a/20180165/1835470 ............... (`overflow: hidden;`) – jave.web Jul 24 '17 at 14:54
@jave.web Very well pointed, but the overflow:hidden doesn't fix things apparently. Does anyone know the solution? http://jsfiddle.net/48nk23e0/ <- As you can see the yellow background extends under the first element, can that be avoided? – Nertan Lucian Jun 18 '21 at 21:29
@NertanLucian it's 2021 now, just use flex :-) https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox BTW: in your jsfiddle - a) you added extra border and you have a background in first - bad example b) the overflow goes for the **filler** element as I've described, not for the container => I've altered your code here: http://jsfiddle.net/mLc63ayd/ – jave.web Jun 19 '21 at 19:02

score 2 · Answer 3 · edited Jul 30 '13 at 20:36

2

Change your css to this:

.container{border: 2px solid black; padding: 5px; position: relative; width: 100%;}

.container div {height: 20px;}

.red{border: 2px solid red; display: block; float: left;}

.green{border: 2px solid green; display: block; float: left;}

.blue{border: 2px solid blue;}

Tested in Chrome

EDIT

Silly me, this is the forked jsfiddle: http://jsfiddle.net/BWRVk/

edited Jul 30 '13 at 20:36

Hemerson Varela

24,034
16
68
69

answered Jul 30 '13 at 19:33

Agustin Meriles

4,866
3
29
44

score 1 · Answer 4 · edited Jul 30 '13 at 20:57

1

If you want it to be responsive, give the divs % widths.

http://jsfiddle.net/feitla/6kLVn/6/

.container div {height: 20px;}

.red{border: 2px solid red;width:10%;display:inline;}

.green{border: 2px solid green;width:10%; display: inline;}

.blue{border: 2px solid blue;display:inline-block;width:80%;}

edited Jul 30 '13 at 20:57

Hemerson Varela

24,034
16
68
69

answered Jul 30 '13 at 19:35

feitla

1,334
1
7
12

score 1 · Answer 5 · edited Jul 30 '13 at 20:57

I guess it is all based on what you want your images to be. I just used % on the images to show they can be resized according to responsive design. http://jsfiddle.net/6kLVn/7/

HTML

<div class="container">
    <div class="red">Red</div>
    <div class="green">green</div>
    <div class="blue">blue</div>
</div>

CSS

.container{border: 2px solid black; padding: 5px; position: relative; margin:0px; width: 100%;}

.container div {height: 20px; display: inline-block; padding:0px; margin:0px;}

.red{border: 2px solid red; width:31%; }

.green{border: 2px solid green;width:31%;}

.blue{border: 2px solid blue;width:31%;}

score 1 · Answer 6 · answered Jun 29 '21 at 19:41

1

Give the container display: flex , each div flex: 1 and the last div give it flex-shrink: 1; width: 100%

Example here - http://jsfiddle.net/wtsn3uzh/

answered Jun 29 '21 at 19:41

URL87

10,667
35
107
174

Make an inline-block div take 100% of the remaining width

6 Answers6

Linked