Is there a way to position two forms next to each other in alignment?

Question

Is there a way to position two forms next to each other in alignment?

I would like to display two forms side by side. Currently, I have one form shown here: http://gyazo.com/093efe95337ace40fe633adb88b76c2d. I want the same form to be displayed on the right-hand side as well.

.comments-section .comment-form {
  padding: 20px;
  background: #f8f8f8;
  border: 1px solid #dddddd;
  border-radius: 3px;
}
.row {
  margin-left: -15px;
  margin-right: -15px;
}

<div class="tab-pane active" id="company-contact">
  <div class="company-profile company-contact">
    <h3>Create an Account With Us</h3>

    <form class="comment-form">

      <div>

        <div class="left">
          Username:
        </div>
        <div class="right">
          <div class="row">
            <div class="col-xs-4">
              <input type="text" required>
            </div>
          </div>
        </div>
      </div>



      <div class="left">
        Email:
      </div>
      <div class="right">
        <div class="row">
          <div class="col-xs-4">
            <input type="email" required>
          </div>
        </div>
      </div>


      <div class="left">
        Password:
      </div>
      <div class="right">
        <div class="row">
          <div class="col-xs-4">
            <input type="password" required>
          </div>
        </div>
      </div>
  </div>
</div>

</form>

Can anyone guide me on how to achieve this layout?

html css

Answer 1

Answer №1

Step one, make sure to close your form before the first two div elements.

Next, you can insert a second form right after closing the first one.

Assign a class to both of these forms.

In your CSS file, include the following code:

.sideBySideForm{
display: inline-block;
}

I hope this explanation is helpful and I apologize for any language errors :)

Answer 2

Step one, make sure to close your form before the first two div elements.

Next, you can insert a second form right after closing the first one.

Assign a class to both of these forms.

In your CSS file, include the following code:

.sideBySideForm{
display: inline-block;
}

I hope this explanation is helpful and I apologize for any language errors :)

Answer 3

Answer №2

Maybe you should consider arranging your input boxes in this way:

<h3>Register for an Account</h3>

    <form class="comment-form">
        
        Username:<input class="comment-form"  type='text' name='username' id='username'  maxlength="50" placeholder="Username" />

        Email:<input class="comment-form"  type='text' name='email' id='email'  maxlength="50" placeholder="Email" />

        Password:<input class="comment-form"  type='password' name='password' id='password'  maxlength="50" placeholder="Password" />
    
    </form>

Answer 4

Maybe you should consider arranging your input boxes in this way:

<h3>Register for an Account</h3>

    <form class="comment-form">
        
        Username:<input class="comment-form"  type='text' name='username' id='username'  maxlength="50" placeholder="Username" />

        Email:<input class="comment-form"  type='text' name='email' id='email'  maxlength="50" placeholder="Email" />

        Password:<input class="comment-form"  type='password' name='password' id='password'  maxlength="50" placeholder="Password" />
    
    </form>

Answer 5

Answer №3

Initially, it is important to clarify the meaning of

I want the form on the right side to match the one on the left

Instead of diving into specifics, I encountered a similar issue where using two consecutive forms in HTML did not yield the desired outcome.

In your scenario, there are two potential solutions :

If both forms have the same action (PHP action file) :

In this case, you can simply utilize a single form with duplicated input fields to achieve a layout like this:

<form action='youraction.php'>
    <div class='insameline'>
        <input> username </input>
        <input> username </input>
    </div>
    <div class='insameline'>
        <input> email </input>
        <input> email </input>
    </div>
    <div class='insameline'>
        <input> password </input>
        <input> password </input>
    </div>
</form>

You can then apply your preferred styles or include the following:

div.insameline {
    display: inline-block;
    margin-block-end: 0.83em;
}

Adjusting the value of margin-block-end can help shift the second block to the right as needed

If you require the same form but with different actions, your code might resemble this:

<form action='youraction.php'>
    <div class='insameline'>
        <input> username </input>
        <input formaction='yourotheraction.php'> username </input>
    </div>
    <div class='insameline'>
        <input> email </input>
        <input formaction='yourotheraction.php'> email </input>
    </div>
    <div class='insameline'>
        <input> password </input>
        <input formaction='yourotheraction.php'> password </input>
    </div>
</form>

Answer 6

Initially, it is important to clarify the meaning of

I want the form on the right side to match the one on the left

Instead of diving into specifics, I encountered a similar issue where using two consecutive forms in HTML did not yield the desired outcome.

In your scenario, there are two potential solutions :

If both forms have the same action (PHP action file) :

In this case, you can simply utilize a single form with duplicated input fields to achieve a layout like this:

<form action='youraction.php'>
    <div class='insameline'>
        <input> username </input>
        <input> username </input>
    </div>
    <div class='insameline'>
        <input> email </input>
        <input> email </input>
    </div>
    <div class='insameline'>
        <input> password </input>
        <input> password </input>
    </div>
</form>

You can then apply your preferred styles or include the following:

div.insameline {
    display: inline-block;
    margin-block-end: 0.83em;
}

Adjusting the value of margin-block-end can help shift the second block to the right as needed

If you require the same form but with different actions, your code might resemble this:

<form action='youraction.php'>
    <div class='insameline'>
        <input> username </input>
        <input formaction='yourotheraction.php'> username </input>
    </div>
    <div class='insameline'>
        <input> email </input>
        <input formaction='yourotheraction.php'> email </input>
    </div>
    <div class='insameline'>
        <input> password </input>
        <input formaction='yourotheraction.php'> password </input>
    </div>
</form>

Answer 7

Answer №4

<div class="tab-pane active" id="company-contact">
  <div class="company-profile company-contact">
    <h3>Sign Up With Us</h3>

    <form class="comment-form">


<div class="row">
  <div class="col-md-4">
      <div class="left">
          Username:
      </div>
            <input type="text" required/>
 </div>
  <div class="col-md-4">
      <div class="left">
        Email:
      </div>
      <input type="email" required/>
  </div>  

  <div class="col-md-4"> 
      <div class="left">
        Password:
      </div>
     <input type="password" required/>
   </div>
</div>
</form>
      </div>
    </div>

Check out the JsFiddle demo. The layout adjusts responsively based on screen size, stacking vertically when small and horizontally otherwise. To prevent vertical stacking, consider using col-xs-6 instead of col-md-6.

Answer 8

<div class="tab-pane active" id="company-contact">
  <div class="company-profile company-contact">
    <h3>Sign Up With Us</h3>

    <form class="comment-form">


<div class="row">
  <div class="col-md-4">
      <div class="left">
          Username:
      </div>
            <input type="text" required/>
 </div>
  <div class="col-md-4">
      <div class="left">
        Email:
      </div>
      <input type="email" required/>
  </div>  

  <div class="col-md-4"> 
      <div class="left">
        Password:
      </div>
     <input type="password" required/>
   </div>
</div>
</form>
      </div>
    </div>

Check out the JsFiddle demo. The layout adjusts responsively based on screen size, stacking vertically when small and horizontally otherwise. To prevent vertical stacking, consider using col-xs-6 instead of col-md-6.

Is there a way to position two forms next to each other in alignment?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

``There Seems to be an Issue with Loading Content in Tabs

Struggling with aligning rows containing three divs each in Rails and bootstrap

Using AngularJS to incorporate ng-include with ng-click functionality

Injecting CSS styles into a webpage using a Chrome extension before the page has completely loaded to achieve instant customization

Is there a way to retrieve all "a" tags with an "href" attribute that contains the term "youtube"?

Questions about syntax: What is the correct course of action?

When you hover over them, Material UI icons shrink in size due to the Border

Is it possible to use an onclick function to input JavaScript values into a password entry box seamlessly?

Issue with CSS background scaling bug

What is the best way to ensure HTML validation during a pull request?

Convert a form into plain text utilizing CSS with minimal usage of jQuery or Javascript

How can I include a ?ref query parameter in a URL when linking from external websites?

Attempting to deactivate the bootstrap-fullscreen-select feature using JavaScript

JavaScript tool: Verify the presence of both jQuery and jQuery UI

Adding a border around the `<tr>` elements in a table

How can two unique links toggle the visibility of divs with two specific IDs?

What steps do I need to take to transform this HTML snippet into a Bootstrap design

Utilize HTML5 local storage to highlight a specific row in a table

Switching between three div elements along with two icons can be done by using toggle functionality

What could be causing my PrimeReact dropdown component to ignore the custom class styles?