...">
Geek Answers Handbook

What is the right way to place 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 (note that dd1 is a hidden element)

 _________________________________ ________________________ | | Dd2 Label | | | | |_______________________| | | | | ________________________ | | Dd3 Label | | | | |_______________________| | | | | ________________________ | | Dd4 Label | | |_______________________________| |_______________________|

CSS is not really my thing, but I tried a whole bunch of things and got something working, but it still doesn't look right. Here is the CSS that 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 so that it looks right.

Edit: I would like to change the markup to use tables and what not, but it is automatically generated and cannot be changed.

+6
css css-float
source share
5 answers
 #dt1, #dt0 { display: none; } #dd0dd { float:left; } #dt1, #dt2, #dt3, #dt4{ float:left; width:80px; } #dd1dd, #dd2dd, #dd3dd, #dd4dd { clear:right; }

Set fields, etc.

+3
source share

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

css floats is one of the most confusing css concepts (I teach material and it is one of the most difficult things to explain to students). but I promise you, once you learn css, you will never want to re-encode the table, except for the good, tabular data, for which the tables are awesome.

+1
source share

Do you need to use the <dt> and <dd> tags? If you intend to use them, you should surround them all with the <dl> , but since you want your text fields side by side with your label instead of the indentation below them, it wouldn't just be easier to surround both (your label and input) in the div? This will give you the layout you are looking for.

0
source share

Some abomination like this one can work, but it is very fragile, various widths and heights are determined using the technique of “violin with it until it works”:

 #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; }

It works on jsfiddle.net in Safari, YMMV somewhere else. Now I feel dirty.

0
source share

Fuck tableless CSS , you would have done weeks ago, if you just put all this in a table, t also have to deal with browser inconsistency.

We even have several allies:

Here from 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>
-2
source share

More articles:


All Articles