How to arrange forms horizontally in the HTML page? - html

Question

I have two forms, and by default, they will appear in the HTML page vertically. However, due to the limitation of the page's space, it is better to arrange them in a horizontal way, with the help of CSS.
The forms are as follows:
<form>Form A</form>
<form>Form B</form>
Any help in CSS?

Answer 1

use float:left on the forms.
HTML:
<form>Form A</form>
<form>Form B</form>
CSS:
form
{
float:left;
}

Answer 2

Float the forms left inside their parent control. You may also need to set a suitable width to get the layout right on different browsers, depending on margins and padding etc.
HTML:
<form class="colform">Form A</form>
<form class="colform">Form B</form>
CSS:
.colform { float:left; width:50%;}

Answer 3

You can place each form within a div. Once you have the 2 divs, use css to make narrow and float them to the left to place them one beside each other. You can also add these classes to the form instead of the div. ie:
<div class="form_wrapper">
<form></form>
</div>
<div class="form_wrapper">
<form></form>
</div>
OR:
<form class="form_wrapper"></form>
<form class="form_wrapper"></form>
Your CSS:
<style>
.form_wrapper {
width: 200px; /* the width of half of your space or 50% */
float: left;
}
</style>
Voila that should do it.

Answer 4

There are a number of lightweight CSS frameworks that take the pain out of horizontal styling of page elements like you desire. These frameworks will take care of handling different browser nuances and let you focus on coding instead of layout:
Bootstrap, from Twitter
Blueprint CSS
Normalize.css

Answer 5

form {
width:50%;
float:left;
}

Answer 6

Or, maybe like this(for proper spacing, on any screen size):
form {
width:35%;
float:left;
padding-left:5%;
padding-right:10%;
}