Question

I have a very simple form for data input. Just labels with inputs. But my labels are localized, so I don’t know how long text for different languages will be. This problem is easily solved with table layout:

<table>
    <tr>
        <td>
            <label for="Text1">Short</label>
        </td>
        <td>
            <input id="Text1" type="text" />
        </td>
    </tr>
    <tr>
        <td>
            <label for="Text1">Looooooooong</label>
        </td>
        <td>
            <input id="Text2" type="text" />
        </td>
    </tr>
</table>

No matter how long labels are my layout will be always nice. But us many say using table tag with non tabular data is not good. I don’t now how to solve this problem with divs.

 <div>
    <div style="float:left; width:50px;"><label for="Text3">Short</label></div>
    <div style="float:left;"><input id="Text3" type="text" /></div>
    <br style="clear:left;" />
</div> 
<div>
    <div style="float:left; width:50px;"><label for="Text4">Looooooooong</label></div>
    <div style="float:left;"><input id="Text4" type="text" /></div>
    <br style="clear:left;" />
</div>

With this solution I need to use fixed size divs. Of cource I can set some big value for label divs width, but I want that my UI takes as much space as needed.
Any ideas?

Answer 1

The only way to really get a nice, adjustable layout similar to the one you get with an HTML table (which is semantically correct here, should someone care about this) is to use table layout in CSS, i.e. to use display: table, display: table-row, etc. It’s probably obvious how to do that. But it will have more limited browser support than an HTML table.

Any other approach has some rigidity where a guess on the widths of labels or the entire… construct has to be made.