Search code examples
htmlcssstylesheetcss-float

Displaying name and value in two separate blocks

In the html below 'Rome' is appearing below 'Place' from the second line, how do I prevent that?

http://jsfiddle.net/JqxTx/21/

Thanks, Chris.

Solution

  • You could either go with hanging line indent or CSS3 columns, though regarding the latter you'll have to do some investigation as to whether they're useful in this scenario.

    I usually go with old-style 

    <table>
    <tr>
        <td><label>Label</label></td>
        <td><span>Text</span></td>
    </tr>
</table>

    since it's simple, it works, and though there's a bit of redundant code, it doesn't promote nesting and it's not that big of a mess. I still fail to see any good, simple equivalent CSS replacement for this layout scheme. The best one probably is either

    <label style="float: left; width: 20%;">Label</label>
<span style="float: left; width: 80%;">Text</span>

    or 

    <label style="position: absolute; width: 20%;">Label</label>
<span style="display:block; padding-left: 20%;">Text</span>

    You could probably find more here or in the answer to this question. But they're not as good as the table because they don't adapt to the first column's contents.

    Hacks like

    <label style="float:left; height: 2em;">Label</label>
<span>Text</span>

    or

    <label style="display:block; float:left;">Label</label>
<span style="display:block; float:left; width:90%;">Text</span>

    work but I wouldn't recommend them because they both rely on certain screen dimensions.

    G'luck.