Side-by-side forms?

[EnderX]

I'm having to redesign a web-based data-entry page; as I had the original set up, it would have caused a high degree of duplicated information in the database I am working with.

The original design called for a single form, in which a given set of data would be specified. However, the data in question came in a three-level 'pack' structure, such that an item on L1 could be associated with one or more items on L2, and items on L2 could be associated with zero or more items on L3. As a result, I was requested to redesign the page layout with multiple forms, so that making a change to an item on L2 or L3 wouldn't require having to fill the entire form for everything.

This is more a question of aesthetics than anything else; I can create the forms in question with no problem, but the L2 and L3 forms require only a few small bits of information attached to them. As a result, they're long (crossing the width of the screen at my current resolution) and thin (only two rows thick). I was hoping to find some way to reposition the beginning/ending points of the tables on the screen, so as to place the L2 and L3 forms next to each other instead of having one of them on top of the other one.

Or in other words, this is what I currently have,

[IMG]http://www.freewebs.com/enderx/Ephemera/Form%5FSet.PNG[/IMG]

and this is what I'm hoping to end up with:

[IMG]http://www.freewebs.com/enderx/Ephemera/Form%20Align.PNG[/IMG]

Is what I'm requesting possible, and if so, would someone please show me how to do this?

Thanks in advance,
-EnderX

[stymiee]

Use FLOAT to float one form to the left and the other to the right.

[tgreer]

I can see you put work into your visual examples, but I'm having a hard time figuring out what they mean.

However, stymiee has given you the proper starting point. First, place each of your form "blocks" into a "div" element, so that the page is organized well structurally.

Then, you can use CSS to position the forms relative to the page and each other. The "float" property is important to understand.

[dsrtprwlr]

I think what you are looking for is actually looking for something more like this. I have have no idea if it is blah blah blah compliant but it works in IE7 and FF 3.0.3.

<form action="" method="post" style="display:inline;"><input name="Submit" type="submit" value="Remove Comment"></form> <form action="" method="post" style="display:inline;"><input name="Submit" type="submit" value="Disregard Report"></form>