Question

I have two <div> elements, one next to the other. Both have the CSS attribute display: inline-block;. Now the second <div> element has a fixed width of 100 px, whereas the first <div> element doesn’t have a fixed width: it depends on the size of the window.

My problem is that the first <div> element will spread over 100% vertically if the window is narrow. I would like to restrict its width to 100% minus 100px, so that both <div> elements can align one next to the other at all times.

I’ve looked at posts with similar questions, but none really dealt with the case of inline-block.

EDIT: Here is a jsfiddle: http://jsfiddle.net/y3sXu/ I want the first <div> to provide some room for the second <div> on the same line.

Answer 1

There’s no particular reason to use display: inline-block to do this.

Here’s a clean implementation using floats instead: http://jsfiddle.net/y3sXu/14/

<div id="container">
    <div id="DivB">b</div>
    <div id="DivA">a</div>
</div>

#container {
    overflow: hidden;
}
#DivA {
    overflow: hidden;
}
#DivB {
    float: right;
    width: 100px;
}