Can't convert Table layout to DIVs - html

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.

Answer 2

This is what I came up with.
It's cleaner than yours, both the tabular and div approach.
The point of a so called "div layout" is to not have the not-semantic table stuck on your site like a pain in the neck. That doesn't necessarily means you need divs! A simple form and labels can do just fine.
The Code
HTML
<form>
<label>Short<input></label>
<label>Loooooooooooooooong<input></label>
</form>
CSS
form {
width: 50%;
}
label {
display: block;
}
label input {
float: right;
}
I've set the form to 50% so that you can easily resize the view port and see what happens when the width is not sufficient. This way, the input will be pushed down, but hte label won't be broken.
It's usually good to follow this rule of thumb: If a div only has one child nested inside of it, you can usually skip it. This rule works for simple designs like this (there are cases where extra divs are needed for complex design issues)

Answer 3

Although I am not completely clear as to what your layout needs are, I like to right-justify labels for readability:
<div>
<div style="float:left; width:104px; text-align:right; margin-right:4px;"><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:104px; text-align:right; margin-right:4px;"><label for="Text4">Looooooooong:</label></div>
<div style="float:left; "><input id="Text4" type="text" /></div>
<br style="clear:left;" />
</div>

Answer 4

I don't know if this helps you, but after AVOIDING tables like the plague for the past 5 years I am coming to realize there are a lot of old school instances that work really well with tables. The past 2 of 5 form solutions have been inside tables. Like you said, it's "nice" and neat without a lot of extra code work.
If the table works, use it.