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

Question

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

==========================================================
= 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.

Answer 1

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

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

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

Answer 2

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

CSS:

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

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