How to make input wider if there is any space left

How can I make my inline input fill rest of the div? Obviously, width: 100% fills to the whole div and thus makes the input to jump to 开发者_JS百科the next line.

As in this picture, the red input should fit the remaining space on the right.

If the input width is greater than the space left, it should wrap to new line. That works fine. Also, the some-content width is dynamic.

You could do this with JavaScript on page load:

$(document).ready(function() {
  $("#input").width( $("#container").width() - $("#bubble").width() - 50 );
});

The answer to this is you can't, @Mike's answer above assumes that you know the width of "some-content" if so you could just set the width of the input be the container minus some-content.

Inputs do not display block like a div would in this situation.

I think if you:

• float:left the some-content tag
• margin-left: [width of some-content tag] on the input
• margin-right: negative [width of some-content tag] on the input
• width: 100% on the input (try 99% or 98%, also)

Might work.