I have this markup
<dt id="dt0"> </dt>
<dd id="dd0dd"> <textarea id="dd0"></textarea> </dd>
<dt id="dt1"> </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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With