Dynamic width with inline-block

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 n开发者_JAVA技巧arrow. 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.

---

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;
}

---

This is an old question but has some weight in Google so I thought I'd update it with a new answer. A more modern way to accomplish this is to stick with display:inline-block; and use calc for the width of the variable element.

So long as you have one fixed width inline element width: 150px, you can offset the variable width element by the fixed width calc(100% - 150px).

Your code should look like this:

.fixed-width-element {
  display: inline-block;
  width: 150px;
}

.variable-width-element {
  display: inline-block;
  width: calc(100% - 150px);
}

---

I think I understand what you are asking for. http://jsfiddle.net/y3sXu/6/

I have gone for a traditional two column layout, as it seems like the best way to solve your problem.

float has been used to ensure that the right hand div always sits on the right, and margin-left to keep the left div away. overflow:hidden is used a cheap and cheerful clearfix.

---

best way I can figure doing it is with absolute positioning:

div#TextB{
    position:absolute;
    right:10px;
    top:10px;
}

div#master{
    margin-right:120px;
}

http://jsfiddle.net/Vnxr7/1

---

There is one very ugly solution: Set the overflow of the outer div to hidden, take the div out of the dom using position:relative, setting the left to -100px and the width to 100%.

You have to play around with the display, position and left/top etc. or get back with some more details so one could know what you want to achieve.

---

what about this ?

div {
    background:green;
    margin-right:100px;
}


#TextB{
    width:100px;
    background:red;
    float:right;
    margin:0px;
}

Updated version

---

Just give the outer div a padding of 50px on both left and right side

EDIT Place this where u want to put the gap:

<div width="100px" height="1em">&nbsp;<div>