Как сохранить всплывающие элементы без использования фиксированной ширины?

Question

Я оформляю серию рядов форм. Каждый элемент div имеет тег div с фиксированной шириной и раздел содержимого, который может содержать любое количество элементов типа float: left.

Пример разметки:

<div class="Row">        
    <div class="Label">Label Here</div>        
    <div class="Content">            
        <div class="Item">Short Content</div>        
    </div>        
</div>    
<div class="Row">        
    <div class="Label">Label Here</div>        
    <div class="Content">            
        <div class="Item">
            Long Content ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id eros magna. Suspendisse eu diam nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu neque massa.
        </div>                
    </div>        
</div>

CSS на данный момент:

.Row {
    clear: left;
    padding: 10px;
}

.Label {
    float: left;
    width: 150px;
}

.Content {
    float: left;
}

.Content .Item {
    float: left;
}

jsfiddle здесь: http://jsfiddle.net/vVy5J/2/

Это выглядит правильно, если содержимое содержимого div не шире оставшейся ширины в строке. Если это так, вместо этого div содержимого «падает» под меткой и обнимает левый край строки div: http://screencast.com/t/Iknv98R9

Мне нужны длинные div содержимого для переноса, но они все еще должны быть в верхней части строки и совмещены с правым краем метки.

Традиционное решение для этого - дать содержимому div фиксированную ширину. Но это не сработает, потому что ширина строк варьируется в зависимости от размера окна браузера и т. Д., И контентный div должен растягиваться от правого края тега div до правого края содержащего строки div.

Требования: я могу изменять разметку только внутри строки div. Содержимое должно быть элементом, поэтому отступ для текста не будет работать для меня. Мне нужно поддерживать IE7 +

Answer 1

Вы можете поместить position:relative; в строку, position:absolute; в метку, просто чтобы вынуть ее из потока документов, затем margin-left:150px в Контент (или как бы он ни был широк).

Это не будет хорошо, если есть вероятность, что Ярлык будет выше, чем Контент.

Answer 2

Вы можете использовать простой прием позиционирования.#row должен быть относительным, а содержимое абсолютно левым: 150px.

.Row
{
    ...
    position: relative;
}

.Content
{
    ...
    position: absolute;
    left: 150px;
}

jsfiddle