How to get 2 forms to align vertically

Question

0.00/5 (No votes)

See more:

Hi,

I have a HTML file which contains 2 forms, which are the same at the moment. All I want is for my web page to be split into 2 halves, and each form goes to one side. So each form should have their own half of the screen, and they should be aligned vertically and horizontally in that half.

It's just not working out.

I currently have this: http://www.datafilehost.com/d/a18afce1[^]
(don't use their download manager). There are no executable files in there (is HTML executable?)
because i've been moaned at before for having executables in my attachments...

-Rixterz

Posted 5-May-14 0:21am

Rixterz123

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Kornfeld Eliyahu Peter · Answer 1 · 2014-05-05T01:00:00

Solution 1

It is not a good practice to have multiple forms on a single HTML, however if you decided that this what you want, than use css columns to put them side-by-side...
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts[^]

Posted 5-May-14 1:00am

Kornfeld Eliyahu Peter

Comments

Sergey Alexandrovich Kryukov 5-May-14 7:43am

Sure, a 5.
—SA

Kornfeld Eliyahu Peter 5-May-14 7:44am

Thank you...

Sanket Saxena 5-May-14 9:05am

correct +5

Kornfeld Eliyahu Peter 5-May-14 9:19am

Thank you...

W∴ Balboos, *GHB* · Answer 2 · 2014-05-05T01:15:00

I had been having a lot of trouble with alignment across various browsers and local vs. thin-client rendering. I solved it by taking full charge of the locations of all objects and their sized.

Use the <form style='position:absolute;top:##px;left:##px;width:??px;'>> to force the location of the upper left corners of your <form> (div/table/etc.).

## is some numerical value. To align the forms side-by-side, set the tops the same, etc.

Why the ?? with width? I found another problem was declaring the width. Although using a % for the width would be very handy, I've found it at times unreliable. I suggest you define the width, as well, in px.

If they need to be the same height, then add height:##px

So - now you put all of this into a style sheet, which you can use on both forms, EXCEPT, the values you need to move the forms so they don't overlap one another (e.g., left:10px; vs. left:510px;).

There are other ways to do this (based upon position:relative, for example. The above allows the least flexibility in location. In my case, it's exactly what I wanted.

I'm a bit confuse on how you can have two forms aligned both vertically and horizontally in their respective halves. That description implies they overlap.