How to Align Two HTML Forms Using CSS

Question

How to Align Two HTML Forms Using CSS

I've been experimenting with various methods, but I'm still unable to achieve the desired outcome.

Currently, my setup looks like this:

https://i.sstatic.net/fUXKr.png

However, what I really want is something more like this:

https://i.sstatic.net/VYYgX.png

The layout consists of a #Container div that contains two forms: #Form1 for profile picture customization and #Form2 for personal details such as name, email, and website.

My goal is to have the profile picture aligned on the left, followed by the text fields for first name, last name, and email. Once the bottom of Form1 is reached, Form2 should appear aligned to the left side as illustrated in the image.

For example, if I set #Form1 to 30% width and Form2 to 60%, it should look like this:

https://i.sstatic.net/jJZIF.png

I've attempted positioning #Form1 as relative and #Form2 as absolute, but so far, I haven't achieved the correct result.

This is the CSS I'm currently using:

#Form1 {
    width: 30%;
    float: left;
    margin-top: 15px;
}
#Form2 {
    width: 60%;
    float: left;
    margin-top: 15px;
}

Here's a sample snippet of the HTML code:

<div id="container">
    <form id="form1">
    <!-- Content of Form1 -->
    </form> 
    <form id="form2">
    <!-- Content of Form2 -->
    </form> 
</div>

html forms css

Answer 1

Answer №1

To achieve the desired result, you can set form1 to be positioned absolutely and break up form2 into multiple divs (while still within the same parent form). Here is an example:

div {
  box-sizing: border-box;
}
#container {
  position: relative;
}
#Form1 {
  padding: 5px;
    width: 30%;
    height: 50%;
    background-color: red;
    position: absolute;
}
#Form2 {
    width: 60%;
    height: 300px;
}

form {
  display: inline;
}

#Form2 .top {
  padding: 5px;
  margin-left: 50%;
  background-color: yellow;
  height: 50%;
}

#Form2 .bottom {
  padding: 5px;
  height: 50%;
  background-color: yellow;
}

<div id="container">
  <div id="Form1">
    <form>
     form 1
    </form>
  </div>
  <div id="Form2">
    <form>
      <div class="top">content of form 2</div>
      <div class="bottom">other content of form 2</div>
    </form>
  </div>
</div>

Answer 2

To achieve the desired result, you can set form1 to be positioned absolutely and break up form2 into multiple divs (while still within the same parent form). Here is an example:

div {
  box-sizing: border-box;
}
#container {
  position: relative;
}
#Form1 {
  padding: 5px;
    width: 30%;
    height: 50%;
    background-color: red;
    position: absolute;
}
#Form2 {
    width: 60%;
    height: 300px;
}

form {
  display: inline;
}

#Form2 .top {
  padding: 5px;
  margin-left: 50%;
  background-color: yellow;
  height: 50%;
}

#Form2 .bottom {
  padding: 5px;
  height: 50%;
  background-color: yellow;
}

<div id="container">
  <div id="Form1">
    <form>
     form 1
    </form>
  </div>
  <div id="Form2">
    <form>
      <div class="top">content of form 2</div>
      <div class="bottom">other content of form 2</div>
    </form>
  </div>
</div>

Answer 3

Answer №2

For content to align at the bottom, you will need to insert an additional <div> in the bottom section.

#form1 {
    width: 68%;
    padding-left: 32%;
    height: 100vh;
    background: aliceblue;
}
#form2 {
    position: absolute;
top: 0;
left: 0;
    width: 30%;
    height: 500px;
    background: beige;
}

<div id="container">
    <form id="form1">
    <!-- Content of Form1 -->
    </form> 
    <form id="form2">
    <!-- Content of Form2 -->
    </form> 
</div>

Answer 4

For content to align at the bottom, you will need to insert an additional <div> in the bottom section.

#form1 {
    width: 68%;
    padding-left: 32%;
    height: 100vh;
    background: aliceblue;
}
#form2 {
    position: absolute;
top: 0;
left: 0;
    width: 30%;
    height: 500px;
    background: beige;
}

<div id="container">
    <form id="form1">
    <!-- Content of Form1 -->
    </form> 
    <form id="form2">
    <!-- Content of Form2 -->
    </form> 
</div>

Answer 5

Answer №3

A straightforward method is employing float: left; for the element with ID of #form1 Visit this link for more information

Answer 6

A straightforward method is employing float: left; for the element with ID of #form1 Visit this link for more information

Answer 7

Answer №4

Check out this solution where you can use a container to wrap both forms with form1 floating left and the second form wrapping naturally:

<div class="container">
  <div class="left">
    <input type="text">
    <input type="text">
  </div>
  <div class="right">
    <input type="text">
    <input type="text">

    <label><input type="text"></label> 
    <label><input type="text"></label> 
    <label><input type="text"></label> 
    <label><input type="text"></label> 
  </div>
</div>

CSS:

.left {
 float: left; 
 width: 300px; 
 border: 1px solid green;
}

.right {
 border: 1px solid blue;
}

input {
 display: block;
 margin: 20px;
}

Here is the link to view it in action on JSFiddle.

Answer 8

Check out this solution where you can use a container to wrap both forms with form1 floating left and the second form wrapping naturally:

<div class="container">
  <div class="left">
    <input type="text">
    <input type="text">
  </div>
  <div class="right">
    <input type="text">
    <input type="text">

    <label><input type="text"></label> 
    <label><input type="text"></label> 
    <label><input type="text"></label> 
    <label><input type="text"></label> 
  </div>
</div>

CSS:

.left {
 float: left; 
 width: 300px; 
 border: 1px solid green;
}

.right {
 border: 1px solid blue;
}

input {
 display: block;
 margin: 20px;
}

Here is the link to view it in action on JSFiddle.

How to Align Two HTML Forms Using CSS

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Ways to differentiate between a desktop browser width of 1024px and a tablet width of 1024px with the help of jquery

Creating a Mobile-Friendly Centered Navigation Bar with Scroll Functionality Using Bootstrap 4 Alpha 6

Using Tailwind @apply within an Angular application's CSS file

Verification of Form Submission

Unable to access GDrive on Moodle with an iOS device

Why am I unable to use Register as a prop function?

Adding AngularJS modules to an HTML file

When the enter key is pressed in a contenteditable div, line breaks are disregarded

Error Encountered in jQuery UI SelectMenu

Troubleshooting the non-responsive behavior of Bootstrap's hidden-sm-down

Use ajax to load a webpage into a specific div, then reload the same div after submitting

Is it possible for my JQueryUI draggable items to smoothly transition into a different overflowing element?

clicking on the anchor does not trigger the modal to open

Problems with form functionality in React component using Material UI

CSS Tips: Defining Pseudo-Element Sizes

What are some ways to enable text highlighting when it is disabled?

Is there a way to display the next/previous buttons separately from the scroller in my jQuery thumbnail scroller implementation?

Softening the edges of a table

Enable the ability for anchor links to be clickable when the CSS media print format is used to generate

Manipulating an HTML <div> element to display its value as a suffix in another <div> within the HTML code