Question

I am styling a series of form rows. Each row div has a fixed-width label div, and a content div that can contain any number of float: left elements.

Example markup is:

<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 so far is:

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

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

.Content {
    float: left;
}

.Content .Item {
    float: left;
}

jsfiddle here: http://jsfiddle.net/vVy5J/2/

This looks correct as long as the contents of the content div are not wider than the remaining width in the row. If they are, the content div ‘flops’ down beneath the label instead and hugs the left edge of the row div: http://screencast.com/t/Iknv98R9

I need long content divs to wrap, but still be against the top of the row and flush with the right edge of the label.

The traditional solution for this is to give the content div a fixed width. But that won’t fly here because the row widths vary based on browser window size, etc. and the content div needs to stretch from the right edge of the label div to the right edge of the containing row div.

Requirements: I can alter the markup only within the row div. Contents need to be elements, so text-indent won’t work for me. I need to support IE7+

Answer 1

You could put a position:relative; on the Row, position:absolute; on the Label just to take it out of the document flow, then margin-left:150px on the Content (or however wide it’s supposed to be).

It won’t be good though if there’s any chance of the Label being taller than the Content.