Q:

HTML/CSS Two auto-width columns

I'm having an incredibly difficult time achieving the following effect:
==========================================================
= Variable Width =  <input style="width: 100%" />        =
==========================================================

I am using the following HTML:
<dl>
  <dt>
    <label>Variable Width</label>
  </dt>
  <dd>
    <input style="width: 100%" />
  </dd>
</dl>

Please note that I've trimmed down the HTML for readability. 
Can anyone suggest what CSS I should use to achieve this effect? I would prefer to not have to use display: table because I am looking for cross-browser compatibility that reaches IE7.

A:

This is "incredibly difficult" to do without <table> or display: table.. until you know how!
See: http://jsfiddle.net/thirtydot/aLgwt/
This works in IE7 and greater + all modern browsers.
dt {
    float: left
}
dd {
    overflow: hidden;
    padding: 0 4px 0 9px
}
dd input {
    width: 100%
}

An explanation of why it works is here.

