<dl> <dt>an option</dt> <dd>input</dd> <dd>description of an option</dd> ....above repeated few times with different input fields.... <dt> </dt> <dd>submit button ish ere </dd> <dd> </dd> </dl>
But as the text area input its height is bigger then the description its height.. the floating dt comes on the same line instead of on the next line.. check the image!
An solution would be defining special classes for text area that give the last id an height... but you might have another solution?
Msg#: 4332063 posted 4:10 pm on Jun 29, 2011 (gmt 0)
Another good way to do this is the "shrink wrap" approach. It relies on the basic fact that a floated container will contain any children floated within it. So if you float everything left (or right,) float the parent container too. This is useful if you want to cut down on the number of clearing elements you need in your markup - most clearing elements are empty junk with no inherent semantic meaning.
Msg#: 4332063 posted 10:42 pm on Jun 30, 2011 (gmt 0)
Yes the <dl> is the parent. But the way the design is structured with the <dt><dd><dd> always in a row, like so:
<dl> <dt><dd><dd> <dt><dd><dd> </dl>
...kind of warrants some kind of additional container around each <dt><dd><dd> block in order to apply rocknbil's "shrink wrap" approach. Since the initial problem seemed to be that the <dt> wasn't clearing the preceeding <dd>. But such a container would obviously be invalid. So I was really questioning whether you could even apply the "shrink wrap" approach to such a structure? May be the <dl> element is the wrong tool to begin with?
@penders, yes the "shrink wrap" technique will work using the dl as the "container".
However, I agree there could well be problems achieving the desired layout using floats - difficult to tell as we don't have the css. ... were you thinking that a form is usually the best tool for a form?