I'm trying to convert code that was written with tables to css, mainly for a way to learn css. In this case, in terms of tables, there are two tables side-by-side. The left table has two rows and the right just one. It would appear something like: ----------------------------------------------- Left table row 1 | Right table row Left table row 2 | ----------------------------------------------- Code (markup): I thought I had a handle on it and it was looking almost correct in FF but when I looked at it in IE it was a mess. At that point it just became trial and error. The code is below. I've deleted some of the non-essentials, llike options in the drowdowns but the positioning code is all there. I would appreciate any pointers on what mistakes I am making. <td><table border="0" cellpadding="0"> <tr> <td> <div style="float:left; width:360px;"> <div style="float:left; width:140px;"><select name="names" id="name_list" onChange="ChangeBoxStatus('ban');"></select></div> <div style="float:right; width:290px;"> <div style="float:left; width:90px; font-weight:bold; vertical-align:middle;" >Remove Name:</div> <div style="float:right;" ><input type="checkbox" name="removename", id="remove_name" value="", disabled onchange="this.form.submit();"></div> </div> </div> <div style="float:right; width:340px;"> <div style="font-weight:bold;">Sort By: <INPUT TYPE="radio" NAME="group1" VALUE="Date" onchange="this.form.submit();" class="radioWidth"> Date <INPUT TYPE="radio" NAME="group1" VALUE="File Name" checked onchange="this.form.submit();" class="radioWidth"> File Name <INPUT TYPE="radio" NAME="group1" VALUE="Address" onchange="this.form.submit();" class="radioWidth"> Address <INPUT TYPE="radio" NAME="group1" VALUE="Count" onchange="this.form.submit();" class="radioWidth"> Count </div> </td> </tr> <tr> <td> <div style="float:left; width:340px;;> <div style="float:left; width:140px;"><select name="ignored_names" id="ignore_list" onChange="ChangeBoxStatus('ignore');"></select></div> <div style="width:290px;"> <div style="float:left; width:90px; font-weight:bold; vertical-align:middle;" >Remove Ignore:</div> <div ><input type="checkbox" name="remove_ignore", id="remove_ignore" value="", disabled onchange="this.form.submit();"></div> </div> </div> <div style="float:right; width:340px;"> <div style="font-weight:bold;">Show: <INPUT TYPE="radio" NAME="group2" VALUE="Name" onchange="this.form.submit();" class="radioWidth"> Name <INPUT TYPE="radio" NAME="group2" VALUE="Status" checked onchange="this.form.submit();" class="radioWidth"> Status <INPUT TYPE="radio" NAME="group2" VALUE="Skip" onchange="this.form.submit();" class="radioWidth"> Skip </div> </td> </tr> </table></td> <td><table border="1" cellpadding="0" width="100%"> <tr> <td> <div style="width:380px; border:1px solid;"> <div> <div class="smallText" style="float:left; width:90px; font-weight:bold;">Show Only Name:</div> <div style="width:40px;"><input type="text" name="only_this_name" maxlength="25" size="14"> </div> <div style="float:right;"><input type="submit" name="submit_only_this_name" value="Show name"></div> </div> </div> </td> </tr> </table></td> Code (markup):
Well, for starters you need to pull your head out of 1997's backside (no offense) and STOP thinking 'presentation' when making your HTML. The proper start would be to get SEMANTIC markup of those form elements in there -- which means no DIV, no TABLES, no nothing, then add the DIV just where needed. A great many of your div seem to exist for no reason, and to be frank I could say the same about your tables -- since tables with only one TD are 100% pointless bloat. Where are your LABEL tags? Your FIELDSET? You also have a LOT of invalid code, like some comma's in there that don't belong, HTML 3.2 style uppercase tags, etc, etc... I can't even figure out what that code is supposed to render looking like, much less how to fix it... I tried rendering your code, and all I got was overlapping gibberish. Quite often translating from table to non-table involves not only changing to DIV, but quite often throwing out the entire markup wholesale and starting over just because the concepts are that different... this is particularly true if the original code wasn't written properly, which I suspect is your problem here. The lack of labels and fieldsets for example... Gimme a few minutes, and I'll take a wild guess at what you are trying to do.
This isn't perfect and was only tested in Opera (I'm on my lappy instead of at the workdesk), but is how I'd be approaching that (I think) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> Form layout test </title> <style type="text/css"> /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul,dl,dt,dd, table,tr,td,th,p,img { margin:0; padding:0; } img,fieldset { border:none; } body { font:normal 85%/140% arial,helvetica,sans-serif; } form, .submitsAndHiddens { overflow:hidden; /* wrap floats */ zoom:1; /* trip haslayout, wrap floats legacy IE */ padding:0.5em; } input { margin:0; } select, #onlyThisName { width:10em; } fieldset { padding-bottom:0.5em; } label { font-weight:bold; } input { vertical-align:middle; /* older opera and newer FF often screw this up unless you tell them explicitly */ } .removeName, .ignoreName { float:left; clear:both; } .removeName label, .ignoreName label { display:inline-block; /* so we can set widths */ width:8em; text-align:right; } /* legends are funky/unpredictable cross-browser, we can't trust their placement, so we apo span inside them instead */ .sortBy, .show { /* first set up relPo so the span position off the fieldset */ position:relative; zoom:1; /* prevent IE oddities */ overflow:hidden; /* prevent indent after float should this wrap */ padding-left:5.4em; /* make room for the span to sit in */ min-width:6em; /* force float drop at really narrow sizes */ } .sortBy legend span, .show legend span { position:absolute; top:0; left:0; width:5em; text-align:right; font-weight:bold; } .sortBy label, .show label { font-weight:normal; padding-right:0.5em; white-space:nowrap; } .submitsAndHiddens { clear:both; border:1px solid #000; } .submit { float:right; } </style> </head><body> <form action="#"> <fieldset class="removeName"> <select name="names" id="removeNameList"> <option>Dummy</option> </select> <label for="removeNameEnable">Remove Name:</label> <input type="checkbox" name="removename" id="removeNameEnable" value="" disabled="disabled" /> </fieldset> <fieldset class="sortBy"> <legend><span>Sort By:</span></legend> <!-- labels wrapping for white-space nowrap --> <label for="sortByDate"> <input type="radio" name="group1" value="date" id="sortByDate" /> Date </label> <label for="sortByFilename"> <input type="radio" name="group1" value="file name" id="sortByFilename" checked="checked" /> Filename </label> <label for="sortByAddress"> <input type="radio" name="group1" value="address" id="sortByAddress" /> Address </label> <label for="sortByCount"> <input type="radio" name="group1" value="count" id="sortByCount"/> Count </label> </fieldset> <fieldset class="ignoreName"> <select name="ignored_names" id="ignore_list"> <option>Dummy</option> </select> <label for="ignoreNameEnable">Remove Ignore:</label> <input type="checkbox" name="remove_ignore" id="ignoreNameEnable" value="" disabled="disabled" /> </fieldset> <fieldset class="show"> <legend><span>Show:</span></legend> <label for="showName"> <input type="radio" name="group2" value="name" id="showName" /> Name </label> <label for="showStatus"> <input type="radio" name="group2" value="status" checked="checked" id="showStatus" /> Status </label> <label for="showSkip"> <input type="radio" name="group2" value="skip" id="showSkip" /> Skip </label> </fieldset> <fieldset class="submitsAndHiddens"> <label for="onlyThisName">Show Only Name:</label> <input type="text" name="only_this_name" id="onlyThisName" maxlength="25" size="14" /> <input type="submit" name="submit_only_this_name" value="Show name" class="submit" /> </fieldset> </form> </body></html> Code (markup): Valid XHTML 1.0 Strict, semantic markup, practices proper separation of presentation from content (a more proper version would have that CSS in an external file where it belongs!)... added bonus it would be really easy to modify using media queries into single column sections -- as it is it auto-sizes to fit narrow widths quite well. I also switched it to all em and % based fonts/widths so it actually has accessibility and can dynamically adjust as needed to fit whatever you put it into. PX widths == /FAIL/, especially if you use %/em fonts because you care about large font/120 dpi users or those who use different default font sizes. (like me)... also swung an axe at all the scripting hooks -- any js worth a damn should be able to hook onto the page itself, while at the same time any form worth a user using should work with javascript disabled... no matter how much the app-tards are pissing all over the functionality of things like webmail. Mind you, this was a wild guess made from a lot of assumptions, as I couldn't quite figure out what look you were actually aiming for. Seemed to me you were floating a lot of things that, well... didn't need to be floated. Oh, added bonus of using labels and providing FOR, if you click on the text, it's the same as clicking on the INPUT it is 'FOR'.