I have a page where the structure is basically:
Code:
<div><form></div><div></form><form></form></div>
Basically, there's a big form that starts in the left column and ends in the right column, then a second form in the right column.
The problem is, that isn't valid. The end of the first div says "close the stuff in here, including the form."
On the other hand, although it isn't
valid the page does work on all browsers I tested. So,
option one is ignore the lack of validation.
If I didn't have the second form, I would wrap both divs in the form. That would solve my problem. But I do, so that's not an option.
The forms are the gist of the page. The divs are just there for layout. The first form is big and needs two columns. The second form is small and fits nicely in the second column.
Option two: Another change which validates is basically:
Code:
<form><div id="left"></div><div id="right"></div><div id="right2"><form></form></div>
But that gives me another thing to manage in my layout.
What would you do? Another option?
I've put a complete example below if you want to play.
Code:
<!DOCTYPE html>
<html>
<head>
<title>A Form Overlapping Columns</title>
<style type="text/css">
#leftcolumn { float:left; width:15em }
#rightcolumn { margin-left:16em }
</style>
</head>
<body>
<h1>A Form Overlapping Columns</h1>
<p>This page works on browsers, but fails validation.</p>
<p>One form begins in the first div/column, ends in the second. The other is a small form in the second column.</p>
<div id="leftcolumn">
<form name="BigForm" action="#">
<p>Q1: <input type="text" /><br />
Q2: <input type="text" /><br />
Q3: <input type="text" /></p>
</div>
<div id="rightcolumn">
<p> One last question: <input type="text" /><br />
<button type="submit">Submit Big</button></p>
</form>
<form name="LittleForm" action="#">
<p>A different question: <input type="text" /><br />
<button type="submit">Submit Little</button></p>
</form>
</div>
</body>
</html>
Obviously, there are things missing like attributes on the forms and inputs and I always use label tags. But in the interest of brevity, they are left out for the example.
Doctype HTML5 and XHTML 1 have the same issue.
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
