How to stretch the width of an element, so that it's 100% - widths of its siblings?

Question

Say, I have the following unordered list. The button has width: auto. How do I style the elements, so #textField would stretch as much as possible,

Answer 1

Maybe this can help, if you can define maxlength on the input box:

/* CSS */

ul{ 
    float:left; 
    border:1px solid #000; 
    padding:0; 
    position:relative; 
    width:20%; 
    height:25px; 
}

ul li{ 
    float:left; 
    margin:0; 
    padding:0; 
    border:0; 
    list-style-type:none; 
    width:100%; height:100%; 
    position:relative; 
}

ul li input{ 
    margin:0; padding:0; border:0; 
}

ul li input[type='text']{ 
    float:left; 
    width:100%; height:100%; 
    text-indent:10px;  
}

ul li input[type='submit']{  
    position:absolute; right:0; 
    width:auto; height:100%; 
}

/* HTML */

The code basically keeps the input[type='text'] to a width of 100% and positions the button absolute to the parent li. This width of the button is auto and the height is 100% to cover up the textbox. You can then set a maxlength on the textbox to prevent the text from being hidden by the button.