954,604 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

Side-by-side forms?

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

EnderX
Posting Shark
999 posts since Aug 2006
Reputation Points: 483
Solved Threads: 1
 

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

stymiee
He's No Good To Me Dead
Moderator
3,360 posts since May 2006
Reputation Points: 161
Solved Threads: 38
 

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.

tgreer
Made Her Cry
Team Colleague
2,118 posts since Dec 2004
Reputation Points: 227
Solved Threads: 37
 

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.

dsrtprwlr
Newbie Poster
1 post since Oct 2008
Reputation Points: 10
Solved Threads: 0
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You