Diego Diego - 4 months ago 21
CSS Question

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

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?

Answer

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