Running into a clearfix type issue - html

Question

So Two Divs Walk Into A Form
Looks like this:
<form>
<div id="top">
<label>Gimme a Number:<input type="number" /></label><br />
<label>Gimme a Word:<input type="textarea" /></label><br />
<label>Now tell me how you feel about HTML forms: <textarea rows="4" cols="50"></textarea></label><br />
</div>
<div id="bottom">
<label>Gimme a Number:<input type="number" /></label><br />
<label>Gimme a Word:<input type="textarea" /></label><br />
<label>Now tell me how you feel about HTML forms: <textarea rows="4" cols="50"></textarea></label><br />
</div>
</form>
There's some css positioning all the form fields absolute and left, a fiddle of the principal is here (Step 1)
So I fixed the first problem by adding additional line breaks (fiddle of step 2).
This is not an ideal solution for two reasons. Extra elements in the DOM for one, and um... well just look at it. The textarea still overflows into the bottom div.
I found a temporary hack when the miscellaneous clearfix answers I tried didn't work (Mostly from other SO questions) by inserting:
<hr class="clearfix" /><br />
in between the two, and giving the hr visibility:hidden in the CSS.
That made it work on my page, but as you can see here (Step 3) it doesn't actually work. In the form on my page the div's have transparent backgrounds, and it puts them far enough apart that the users are happy, and since this is an intranet order form (used from a phone no less) and not a SV startup webapp, I'm kind of content to leave it production for now, but in the end, what was the right way to do this?
How should I have gotten the div.top to encompass the full content, including the textarea? I've tried a lot of the "go to" solutions for elements with float, but as expected, they don't work since the textarea's aren't floated.
Ideally I want to ditch the extra <br>s, and have the <div>s actually contain their content without either manually positioning every single element or adding a ton of complexity to the page. Any ideas are appreciated.

Answer 1

A nice trick for what you're looking for is using a Html Description List.
For example, you can write this:
<dl id="top">
<dt>Gimme a Number:</dt>
<dd><input type="number" /></dd>
<dt>Gimme a Word:</dt>
<dd><input type="textarea" /></dd>
<dt>Now tell me how you feel about HTML forms:</dt>
<dd><textarea rows="4" cols="50"></textarea></dd>
</dl>
<dl id="bottom">
<dt>Gimme a Number:</dt>
<dd><input type="number" /></dd>
<dt>Gimme a Word:</dt>
<dd><input type="textarea" /></dd>
<dt>Now tell me how you feel about HTML forms:</dt>
<dd><textarea rows="4" cols="50"></textarea></dd>
</dl>
jsfiddle
And here is a bit more css to make it look like your fiddle:
#top{
color:white;
font-weight:700;
background-color:blue;
}
#bottom{
font-weight:700;
background-color:red;
}
dl {
padding: 0.5em;
height: 100%;
display: table;
}
dt {
float: left;
clear: left;
}
dd {
float: right;
clear: right;
}
fiddle
Edit
About label issue being non-superfluous - there is an easy solution using the "for" attribute. Here is an example:
<dt><label for="number1">Gimme a Number:</label></dt>
<dd><input id="number1" type="number" /></dd>
updated fiddle
Your original use of label:
<label>Gimme a Number:<input type="number" /></label><br />
will couple the two tags together and shouldn't be used. Plus talking about semantics, should the input really be part of the label?
Taking in acount your comment about non-semantic use of dd / dt, you can easily swap between the dt and dd, like this fiddle. Here is the updated example:
<dd><label for="number1">Gimme a Number:</label></dd>
<dt><input id="number1" type="number" /></dt>
Now we have a semantic HTML where the CSS takes care of the design choices.
Edit 2
new fiddle - no need in height: 100%; on dl