Hi Scott, Just my two cents here but this actually looks like tabular data you want to display there (will there be multiple rows ?). Remember that tables are still valid tags in the HTML/XHTML language definition. They are just no longer considered fitted or semantically correct for main layout designs as there's more efficient ways to do them now.
Here's what I came up with... The only thing I did was to merge the "ID" cell with the blank cell, thus aligned the new cell text left. Also, I left you the joy of drawing borders, hehe. So if you still decide to switch to the no table route, this might be a good start. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd";> <html xmlns=" http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Table to CSS</title> <style type="text/css"> <!-- * {margin:0pt; padding:0pt;} body {margin:20px; font-size:0.75em; font-family:Arial, Helvetica, sans-serif;} .clear {clear:both; height:0px; line-height:0px; font-size:0px;} ol {width:600px; list-style-type: none; border:1px solid gray;} ol li div {width:140px; float:left; padding:5px; text-align:center;} ol li div.dbl {width:280px; text-align:left;} ol li.header div {font-size:1.2em; font-weight:bold } ol li.tr {clear:both;} ol li.tr div {height:2em;} ol li.tr div label {margin-right:3px;} ol li.tr div input[type=text]{width:140px;} ol li.tr div select{width:100px; margin-right:3px;} --> </style> </head> <body> <ol> <li class="header"> <div>Portion</div> <div class="dbl">ID</div> <div>Membership</div> </li> <li class="tr"> <div> <label for="full">full</label><input id="full" name="full" type="checkbox" /> <label for="half">half</label> <input id="half" name="half" type="checkbox" /> </div> <div class="dbl"> <input name="uname" id="uname" type="text" /> <input type="button" id="b1" name="b1" value="1" /> <input type="button" id="b2" name="b2" value="2" /> <input type="button" id="b3" name="b3" value="3" /> </div> <div> <select class="membershiptype"> <option value="0">guest</option> <option value="1">silver</option> <option value="2">gold</option> </select> <input id="includeme" type="checkbox" /> </div> </li> <!-- insert other <li class="tr"> group here --> <li class="clear"></li> </ol> </body> </html> On 7/20/07, Howell, Scott <[EMAIL PROTECTED]> wrote: > > Hi there. I'm an old-school tables designer trying to kick the habit and > this should be easy. I want to convert the tabled code below to > CSS-only. My main two problems: > (1) cleanly coding in the space taken by in the table > (2) preventing the divs from moving around when the browser is resized > > I also believe I'm killing the page with ten million <div> tags, too, so > if you want to share some design thoughts I'd love to read them. > > Thank you! > > The page: > http://www.howellbox.com/newworld/ > > The CSS: > http://www.howellbox.com/newworld/basecss.htm > > The sinister tabled code: > <table cellpadding="4" border="1" id="olddays"> > <tr> > <td colspan="4" align="center">Portion</td> > <td align="center">ID</td> > <td colspan="3"> </td> > <td colspan="2" align="center">Membership</td> > </tr> > <tr> > <td>full</td> > <td><input type="checkbox" id="full0" /></td> > <td>half</td> > <td><input type="checkbox" id="half0" /></td> > <td><input type="text" name="uname0" id="uname0" /></td> > <td><button name="b10" id="b10">1</button></td> > <td><button name="b20" id="b20">2</button></td> > <td><button name="b30" id="b30">3</button></td> > <td> > <select> > <option value="0">guest</option> > <option value="1">silver</option> > <option value="2">gold</option> > </select> > </td> > <td><input type="checkbox" id="includeme0" /></td> > </tr> > </table> > ______________________________________________________________________ > css-discuss [EMAIL PROTECTED] > http://www.css-discuss.org/mailman/listinfo/css-d > IE7 information -- http://css-discuss.incutio.com/?page=IE7 > List wiki/FAQ -- http://css-discuss.incutio.com/ > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
