Question

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.

Answer 1

#dt1,
#dt0 {
    display: none;
}

#dd0dd {
    float:left;
}

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

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

Set margins etc.