HTML/CSS Два столбца автоматической ширины

Мне невероятно сложно достичь следующего эффекта:

==========================================================
= Variable Width =  <input style="width: 100%" />        =
==========================================================

Я использую следующий HTML:

<dl>
  <dt>
    <label>Variable Width</label>
  </dt>
  <dd>
    <input style="width: 100%" />
  </dd>
</dl>

Обратите внимание, что я упростил HTML для удобства чтения.

Может ли кто-нибудь предложить, какой CSS я должен использовать для достижения этого эффекта? Я бы предпочел не использовать display: table, потому что я ищу кросс-браузерную совместимость, которая достигает IE7.

Ответ 1

Это "невероятно сложно" обойтись без <table> или display: table.. пока вы не знаете, как это сделать!

Смотрите: http://jsfiddle.net/thirtydot/aLgwt/

Это работает в IE7 и выше + во всех современных браузерах.

dt {
    float: left
}
dd {
    overflow: hidden;
    padding: 0 4px 0 9px
}
dd input {
    width: 100%
}

Объяснение, почему оно работает здесь.

Ответ 2

BTW, если вы хотите, чтобы правый столбец был исправлен, но левый с автосогласованием, вы можете изменить этот шаблон на:

CSS

dt {
    float: right;
}
dd {
    overflow: hidden;
    padding: 0 4px 0 9px;
}
dd input {
    width: 100%
}

Обратите внимание, что label должен следовать до input в любом случае.