CSS make textbox fill all available width

Question

I have the following \"line\" in my web page

\"Some Text\"  \"Some more text\"   &l         


        
      

Answer 1

UPDATED ANSWER IN 2018

Just came across this old question and there is now a much simpler and cleaner way to achieve this by using the CSS Flexible Box Layout Model which is now supported by all major browsers.

.flex-container {
  display: flex;
}

.fill-width {
  flex: 1;
}

	Name:more text

Hope this helps someone!

OLD ANSWER BELOW

I know this is an old question but the correct solution isn't here so just in case somebody else finds there way here:

The solution is to wrap the textbox in a span.

HTML:

Input

    

CSS:

label {
    float: left;
}

input {
    width: 100%;
    box-sizing:border-box;
}

span {
    display: block;
    overflow: hidden;
}

See this fiddle for an example (now slightly out of date as I removed padding in favor of using border-box on the input).