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 t

Solution 1:

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

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

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

Solution 2:

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:

<divclass="container"><divclass="left"><divclass="red">Red</div><divclass="green">green</div></div><divclass="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;
}

.leftdiv {
    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

Solution 3:

Change your css to this:

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

.containerdiv {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/

Solution 4:

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

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

CSS

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

.containerdiv {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%;}

Solution 5:

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

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

.containerdiv {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%;}