[SOLVED] Fixed width element with variable width input

Fixed width element with variable width input

Your probably going to say this has been asked before but this is a variation with a bug. So we are all aware of the technique used to answer this question: Fixed width div on left, fill remaining width div on right

However this does not work if the variable width element is an input tag.

http://jsfiddle.net/8pk4K/2050/

even overriding the inputs default css doesnt fix this:

display: block;
overflow:hidden; 
background-color:green;
height: 100px;
width: auto;

Iv been playing with this for ages, it only happens on input tags, if you replace it with a span (default display inline but set it to display block) it still works.

Any idea why this only doesnt work for input tags and nothing else?

EDIT: For clarification, I know that the fix for this is to put the input into a div and apply width 100% to the input. My question is why this is necessary, not how to fix it.

Solution

You can use calc to produce the width what you desire because inputs are replaced elements that have intrinsic dimensions just like images

CSS

.header-right{
    display: block;
    overflow:hidden; 
    background-color:green;
    height: 100px;
    border: none;
    width: calc(100% - 240px); //Add this
    }

Note: You must give a dimension (width) to the select or otherwise give you the default browser width

DEMO HERE