There's nothing wrong with using tables to layout a form. That's a relationship between information, and I would argue that is the best way to go.
See my responses to the "Are tables bad?" question:
http://p2p.wrox.com/topic.asp?TOPIC_ID=29544
http://p2p.wrox.com/topic.asp?TOPIC_ID=28512
What you are doing with divs is essentailly recreating what tables already provide. For an intellectual exercise there is nothing wrong with that, but for the real world there's no need to substitute all that with what tables can already do, well unless you just happen to like that approach!
First thing's first. You aren't writing valid XHTML.
* All attributes must be quoted
* All tag names and attributes must be lowercase.
* Markup must be well-formed, all tags must have an opening and closing tag (or the "/>" shortcut to close a tag).
There is more (the XHTML MIME type, et all), but for now that is enough to get you started.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>gggg</title>
<style type='text/css'>
.outerbox {
width: 500px;
clear: left;
margin: auto; /* margin-left: auto; margin-right: auto; */
border: 1px solid #BDEAE1; /* border-width, border-style, border-color */
}
.DescriptBox
{
width: 200px;
padding: .25em;
margin: 0;
border-right: 1px solid #BDEAE1;
background: #F2FBF9;
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; /* font-size, font-family */
color: #04AF8D;
float: left; /* Ok, the element that you want to float must come first */
}
.InputBox
{
padding: 2px;
/*float: right;*/
border: 1px solid black;
}
</style>
</head>
<body>
<div id="maskhead">
<div id="logoPlaceholder">
<img src="images/logo.gif" width="262" height="74" border="0" />
</div>
</div>
<div id="contentHolder">
<div class="outerbox">
<div class="DescriptBox">Descript 1</div>
<div class="InputBox">
<input type="text" name="field1" value="bbbb" size="12" maxlength="12" />
</div>
</div>
<div class="outerbox">
<div class="DescriptBox">Descript 2</div>
<div class="InputBox">
<input type=text name="field2" value="aaa" size="12" maxlength="12" />
</div>
</div>
<div id="maskhead">
<div>
bottom
</div>
</div>
</div>
</body>
</html>
HTH!
Regards,
Rich
--
[
http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design
Positioning Problem
