atrum Posted June 24, 2009 Share Posted June 24, 2009 Hello all, I am trying to get form elements to line up without using tables. Although I am not hopefull it will be an easy solution. The site I am currently working from is: http://tools.exiled-alliance.com/calltool.dev/ So as you can see, with out tables the labels and the inputs are not aligned very well. I know it can be easily accomplished using tables, but I want to avoid that if possible. Here is my html: <!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"> <head> <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <title>ICCA</title> </head> <body> <div id="wrapper"> <div id="top-left"> <label for="c_name">Caller Name:</label> <input type="text" id="c_name" /><br /> <label for="callbk_number">Callback Number:</label> <input type="text" id="callbk_number" /><br /> </div> <!-- End top-left --> <div id="top-right"> asdf </div> <!-- End top-right --> <div id="bottom"> asdf </div> <!-- End bottom --> </div> <!-- End wrapper --> </body> </html> The CSS: /* Reset.css */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border-style: none; border-color: inherit; border-width: 0; margin: 0; padding: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; top: 0px; left: 0px; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } /* CSS Document */ #wrapper { width: 1013px; height: 813px; margin-top: 8px; margin-left: 8px; margin-bottom: 8px; margin-right: 8px; background-color: #C1CDCD; } #top-left { width: 494px; height: 394px; margin-top: 8px; margin-left: 8px; margin-bottom: 8px; margin-right: 8px; background-color: #F0FFFF; float: left; } #top-right { width: 494px; height: 394px; margin-top: 8px; margin-bottom: 8px; margin-right: 8px; background-color: #F0FFFF; float: left; } #bottom { width: 996px; height: 394px; margin-left: 8px; margin-bottom: 8px; margin-right: 8px; background-color: #F0FFFF; float: left; } Quote Link to comment Share on other sites More sharing options...
xtopolis Posted June 25, 2009 Share Posted June 25, 2009 This was the first thing that came to mind google Quote Link to comment Share on other sites More sharing options...
haku Posted June 25, 2009 Share Posted June 25, 2009 I personally don't think it's that bad to wrap forms in tables - it's often tabular data after all - you have two columns, label and input, that are consistent across all rows, and you have one row for each type of input, that groups together a label and the input. That's tabular. That being said, I usually don't use tables for my forms. Quote Link to comment Share on other sites More sharing options...
atrum Posted June 25, 2009 Author Share Posted June 25, 2009 Thanks for the input Haku. Guess there is no avoiding such an easy method of making stuff "pretty". Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.