What is the process for dividing a form into two separate columns?

I am working on a form that sends input to a PHP script. I want to reorganize the form so that the second section (Person 2) appears in a column to the right of the first section (Person 1), instead of below it.

<link rel="stylesheet" href="test.css">    
    <form class="form-validation" method="post" action="script.php">
       <link rel="stylesheet" href="test.css">
       <h2>Person 1:</h2>
       <br>
       <div class="form-row form-input-name-row">
          <label>
          <span>Name</span>
          <input name="field1" type="text">
          </label>
       </div>
       <div class="form-row form-input-name-row">
          <label>
          <span>Age</span>
          <input name="field2" type="text">
          </label>
       </div>
       <div class="main-content">
          <h2>Person 2:</h2>
          <br>
          <div class="form-row form-input-name-row">
             <label>
             <span>Name</span>
             <input name="field3" type="text">
             </label>
          </div>
          <div class="form-row form-input-name-row">
             <label>
             <span>Age</span>
             <input name="field4" type="text">
             </label>
          </div>
    </form>
    <div>
    <button name="submit">Submit form</button>
    </div>
    </div>

htmlcssforms

Answer №1

Combine both sections within a div with the "sub-entry" class, float them to the left with a 50% width:

.sub-entry {
    width: 50%;
    float: left;
}

.button {
    text-align: center;
    padding-top: 20px;
    clear: both;
}
<form class="form-validation" method="post" action="script.php">
    <link rel="stylesheet" href="test.css">
    <div class="sub-entry">
        <h2>Person 1:</h2>
        <br>
        <div class="form-row form-input-name-row">
            <label>
                <span>Name</span>
                <input name="field1" type="text">
            </label>
        </div>
        <div class="form-row form-input-name-row">
            <label>
                <span>Age</span>
                <input name="field2" type="text">
            </label>
        </div>
    </div>
    <div class="sub-entry">
        <div class="main-content">
            <h2>Person 2:</h2>
            <br>
            <div class="form-row form-input-name-row">
                <label>
                    <span>Name</span>
                    <input name="field3" type="text">
                </label>
            </div>
            <div class="form-row form-input-name-row">
                <label>
                    <span>Age</span>
                    <input name="field4" type="text">
                </label>
            </div>
        </div>
    </div>
</form>
<div class="button">
    <button name="submit">Submit both forms</button>
</div>

The button's containing div was also given the class "button" and centered within the form.

Answer №2

Experience the power of CSS flexbox.

form { display: flex; }
<form class="form-validation" method="post" action="script.php">

  <div class="person-1">
    <h2>Person 1:</h2>
    <div class="form-row form-input-name-row">
      <label>
        <span>Name</span>
        <input name="field1" type="text">
      </label>
    </div>
    <div class="form-row form-input-name-row">
      <label>
        <span>Age</span>
        <input name="field2" type="text">
      </label>
    </div>
  </div><!-- end .person-1 -->

  <div class="main-content person-2">
    <h2>Person 2:</h2>
    <div class="form-row form-input-name-row">
      <label>
        <span>Name</span>
        <input name="field3" type="text">
      </label>
    </div>
    <div class="form-row form-input-name-row">
      <label>
        <span>Age</span>
        <input name="field4" type="text">
      </label>
    </div>
  </div><!-- end .person-2 -->

</form>

<div><button name="submit">Submit form</button></div>

Incredible advantages of utilizing flexbox:

  1. Precise, efficient code writing
  2. Effortless centering both vertically and horizontally
  3. Simple creation of equal height columns
  4. Multiple alignment options for flex elements
  5. Responsive layout implementation
  6. Superior to floats and tables in terms of layout capabilities due to its modern (CSS3) nature

Flexbox is well-supported by all major browsers, barring IE 8 & 9, with some requiring vendor prefixes. To simplify adding necessary prefixes, utilize Autoprefixer. For comprehensive browser compatibility insights, refer to this answer.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble grasping the display property combination in Bootstrap4

Incorporating Bootstrap4 into my web application, I am faced with the task of displaying a menu exclusively on the large screen size setting (lg). The guidelines are straightforward: utilize a class to conceal an element across all screen sizes: .d-none ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Implementing a queue with an on-click event

As a self-proclaimed Java nerd diving into the world of jQuery, I'm facing some challenges. My goal is to create 3 interactive boxes that behave in a specific way: when clicked, one box should come forward while the other two dim and stay in the back ...

javascriptjqueryhtmlcss

Modifying the URL of an image based on screen size with the @media property

Currently working on developing a responsive webpage. An interesting challenge is presenting two distinct images for the desktop and mobile views. Attempted to switch between images by utilizing the @media feature within CSS, as shown below. #login-top-s ...

htmlcssimageuser-interfaceresponsive-design

Using CSS to overlay a background image on top of a background gradient

Struggling to get both a background gradient and a background image (transparent PNG) to display in my div. No matter what, only the color gradient shows up while the image remains hidden. If I use a solid color instead of a gradient, the image displays ju ...

css

What steps can I take to ensure the proper formatting of the `select` input on Mac OS?

How can I maintain consistent formatting for my form across different operating systems? Currently, the form looks good on Windows, but I want to ensure that the select input appears consistently on Mac OS, iOS, and Android devices as well. The image bel ...

htmlcssmacosdrop-down-menucross-browser

Retrieving data from Mouse Hover popup with Selenium in Python

I have a project where I'm utilizing Selenium to automate tasks on a website. There is an interactive mouse hover box that appears to provide relevant information for users. Below is the HTML code snippet for the mouse hover: <td align="center ...

pythonhtmlselenium

At what point do browsers automatically insert CSS styles as attributes without them being explicitly defined?

Greetings Code Gurus, I find myself grappling with an unexpected CSS anomaly while developing a website. Here is the puzzling code snippet: <div id="..." style="padding-bottom: 78px; padding-top: 78px;" >...</div> These styles are manifesti ...

htmlcssinternet-explorergoogle-chromefirefox

Styles for Tab Alignment

.tabs { position: relative; margin: 20px auto; width: 1500px; } .tabs input { position: absolute; z-index: 1000; width: 120px; height: 40px; left: 0px; top: 0px; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filt ...

htmlcsstabs

Center text within a dropdown using Bootstrap styling

In a row within my inline form, I have both an email input and a dropdown. However, after resizing the page, the text within the dropdown is no longer positioned correctly (text on the left, arrow on the right). I attempted to fix this by using: text-alig ...

htmlcsstwitter-bootstrapbootstrap-4

Bootstrap 4 radio buttons are not aligning properly with the padding

There seems to be an issue with the alignment of Bootstrap 4 custom radio buttons and my left padding. Here is a snippet: https://i.sstatic.net/vWTNo.png This is part of the code for displaying an item <div class="p-4"> <ul class="d-flex ...

htmlcssbootstrap-4radio-button

What steps can I take to properly center and repair my web page that is currently a mess

This web page I'm working on is giving me a headache. The #titlediv just won't center and the navbar keeps disappearing randomly. It seems like a big issue that I can't wrap my head around. If anyone out there can help salvage it, here' ...

htmlcsscentering

What is causing the hyperlink to fail to redirect to the specified URL upon being clicked?

I am facing an issue with a contact form where I have included a link to refresh a captcha code upon clicking. Additionally, there is jQuery code that ensures a div remains open by applying CSS styles to it. Both of these functionalities work independently ...

phpjquerycss

Transmit a parameter from a JavaScript code to a Python script

I am using a python script to execute queries in an Oracle Database by passing arguments. prov.py #!/usr/local/bin/python2.7 import sys import argparse import cx_Oracle import json import cgi import cgitb cgitb.enable() lst_proveedores=[{}] conn_str = & ...

javascriptpythonhtmlajax

Modifying the appearance of InputText through CSS encapsulation

I'm a newbie to using Blazor and I'm currently experimenting with changing the style of InputText by utilizing css isolation. Interestingly, I've managed to successfully change the style when setting it inline or internally, however, things ...

cssasp.net-coreblazor.net-7.0asp.net-core-css-isolation

Uploading an image using ajax with multer

When using Multer to upload an image file to my Node server, I keep getting 'undefined' when trying to use ajax to send the image. Ajax : image = $("#input-file-img").val() const data = new FormData(); data.appe ...

javascripthtmlnode.jsajaxmulter

Jumping occurs in Slick Carousel when adjusting the width of the active slide

Check out the fiddle link here: http://jsfiddle.net/br24p3Lr/ I've been attempting to perfect the animation when transitioning to a new active slide. Despite trying various approaches to resolve this issue, I seem to be stuck at the moment. The foll ...

jqueryhtmlcssanimationslick.js

Checking for correct format of date in DD/MM/YYYY using javascript

My JavaScript code is not validating the date properly in my XHTML form. It keeps flagging every date as invalid. Can someone help me figure out what I'm missing? Any assistance would be greatly appreciated. Thank you! function validateForm(form) { ...

javascripthtmlvalidation

How can I adjust the font size of material-ui buttons while ensuring that they scale appropriately?

Having trouble adjusting the font sizes on Material-UI's RaisedButton for React and ensuring that the button scales properly along with it. <RaisedButton label={<span className="buttonText">Log in Here</span>} /> CSS: .buttonText ...

javascriptcssreactjsmaterial-uijsx

What is the best method for binding variables in Vue.JS using moustache syntax and passing parameters to them?

If I have an HTML structure like this: <div> {{ CUSTOM_MESSAGE }} </div> And in my data: data() { return { CUSTOM_MESSAGE: 'Hey there! This message is for {{name}} from {{location}}' } } Is there a way to dynamically p ...

javascripthtmlvue.jsvuetify.js

Is there a way to prevent Vetur from automatically converting colSpan and rowSpan tags?

Currently, I am utilizing nativescript-vue and I require the colSpan and rowSpan tags to remain unchanged. The code formatter in Vetur changes rowSpan="2" to rowspan="2". Is there a way to deactivate the automatic lowercasing feature o ...

htmlvisual-studiovue.jsnativescriptvetur