What's the right way to float these elements

I have this markup

<dt id="dt0">    &nbsp;                                 </dt>
<dd id="dd0dd">  <textarea id="dd0"></textarea>         </dd>

<dt id="dt1">    &nbsp;                                 </dt>
<dd id="dd1dd">  <input id="dd1" type="hidden">         </dd>

<dt id="dt2">    <label for="dd2">Dd2 Label:</label>    </dt>
<dd id="dd2dd">  <input id="dd2" type="text">           </dd>

<dt id="dt3">    <label for="dd3">Dd3 Label:</label>    </dt>
<dd id="dd3dd">  <input id="dd3" type="text">           </dd>

<dt id="dt4">    <label for="dd4">Dd4 Label:</label>    </dt>
<dd id="dd4dd">  <input id="dd4" type="text">           </dd>

which I need to float so that it looks like this (notice that dd1 is a hidden element)

_____________开发者_开发技巧____________________                ________________________
|                               |     Dd2 Label  |                       |
|                               |                |_______________________|
|                               |     
|                               |                ________________________
|                               |     Dd3 Label  |                       |
|                               |                |_______________________|
|                               |
|                               |                ________________________
|                               |     Dd4 Label  |                       |
|_______________________________|                |_______________________|

CSS isn't really my thing, but I've tried a whole bunch of stuff and got something working, but it still doesn't look right. Here's the CSS I have now.

#dd0dd {
    float:left;
}
#dt1, #dt2, #dt3, #dt4{ 
    float:left; 
    clear:right; 
    width:80px; 
}
#dd1dd, #dd2dd, #dd3dd, #dd4dd {
    float:right;
    clear:right;
}

Can someone tell me how I can improve this CSS to make it look right.

Edit: I wish I could change the markup to use tables or what not, but it's auto-generated and can't be changed.

#dt1,
#dt0 {
    display: none;
}

#dd0dd {
    float:left;
}

#dt1, #dt2, #dt3, #dt4{ 
    float:left; 
    width:80px; 
}

#dd1dd, #dd2dd, #dd3dd, #dd4dd {
    clear:right;
}

Set margins etc.

• UPDATE - seeing that you cannot edit the html, please check out this css-only solution: http://jsfiddle.net/SebastianPataneMasuelli/csXPG/4/

it includes the dl tag, which needs to have a width set for the layout to work

css floats are one of the most confusing concepts of css (i teach the stuff, and its one of the hardest things to explain to students). but i promise you, once you get to know css, you'll never want to code a table again, except for well, tabular data, for which tables are awesome.

Do you have to use <dt> and <dd> tags? If you're gonna use them you should surround them all of them with a <dl> tag, but since you want your textboxes side-by-side with your label instead of indented below them, wouldn't it just be easier to surround both (your label and input) in a div? This will get you the layout you're looking for.

Some sort of abomination like this might work but it is very fragile, the various widths and heights were determined using the "fiddle with it until it works" technique:

#dt0 {
    display: none;
}

#dd0 {
    height: 100px;
}

#dd0dd {
    float: left;
}

#dt1, #dt2, #dt3, #dt4{ 
    float: left; 
    clear: right;
    width: 80px; 
    margin-left: 100px;
}

#dd1dd, #dd2dd, #dd3dd, #dd4dd {
    float: right;
}

This works on jsfiddle.net in Safari, YMMV anywhere else. I feel dirty now.

To hell with tableless CSS, you would have been done weeks ago if you just put it all in a table, and then you wouldn't have to fight browser inconsistencies either.

We even have a few allies:

• http://giveupandusetables.com/
• http://www.barrypearson.co.uk/articles/layout_tables/defence.htm

Here's an off the cuff solution:

<table>
  <tr><td rowspan=3>
    <dt id="dt0">    &nbsp;                                 </dt>
    <dd id="dd0dd">  <textarea id="dd0"></textarea>         </dd>
  </td></tr>
  <tr style='display:none'><td>
    <dt id="dt1">    &nbsp;                                 </dt>
    <dd id="dd1dd">  <input id="dd1" type="hidden">         </dd>
  </td></tr>
  <tr><td>
    <dt id="dt2">    <label for="dd2">Dd2 Label:</label>    </dt>
    <dd id="dd2dd">  <input id="dd2" type="text">           </dd>
  </td></tr>
  <tr><td>
    <dt id="dt3">    <label for="dd3">Dd3 Label:</label>    </dt>
    <dd id="dd3dd">  <input id="dd3" type="text">           </dd>
  </td></tr>
  <tr><td>
    <dt id="dt4">    <label for="dd4">Dd4 Label:</label>    </dt>
    <dd id="dd4dd">  <input id="dd4" type="text">           </dd>
  </td></tr>
</table>