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

This is possible with CSS in user agents with CSS-2.x-supporting layout engines:

  …
  



  

    

      
        
      
      
        
      
    
  

Tested positive in the following browsers:

• Chromium 16.0.912.75 (Developer Build 116452 Linux), Apple WebCore 535.7
• Chromium 16.0.912.63 (Developer Build 113337 Linux), Apple WebCore 535.1

Please note that paddings and margins on input elements will interfere because of the fixed width.

But: I can see no good reason why you should not use a table element here (tables and CSS do mix). Semantically it would make sense (the table would be serializable), and compatibility will be very likely better than with the CSS display property values above:

It is also possible that you should have used only a table element here in the first place.