What is the best way to position two text fields next to each other on a webpage?

As I design a form for a landing page, my goal is to arrange the text input fields side by side in order to avoid making the form too lengthy. I am striving to achieve a layout similar to this:

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

However, the task seems quite challenging at the moment. Here is the current appearance of my form:

.teaser-right {
  float: right;
  width: 45%;
  margin: 3% 0 0 0
}

#calltoaction-form {
  background: #f2f2f2;
  padding-bottom: 10px;
  width: 800px;
  position: right;
  bottom: 0
}
<div id="calltoaction-form" class="teaser-form">
  <div class="form-title">
    <h3>sample form</h3>
  </div>
  <form id="contact_form" action="_contact-us.php" method="post">
    <div class="form-header">
      <h4>Personal details</h4>
    </div>
    <div class="form-section">
      <input id="name" name="name" type="text" placeholder="Your name">
    </div>
    <div class="form-section">
      <input id="email" name="email" type="text" placeholder="Your email">
    </div>

htmlcss

Answer №1

Here is a snippet of code to include in your CSS file:

.form-section{
    align-items: start;
}

Answer №2

If you want to arrange two input fields next to each other, one method is to use float. However, when using float, it's important to apply the clearfix hack to the parent div to ensure it has the correct height.

Another approach is to utilize display: inline-block. When using display inline-block, remember to reset the font-size of the parent element to 0 and set a specific font-size for the elements with font-size: 12px;, for example. This may result in a slight difference in height compared to using float.

Check out this example:

float: left;

https://jsfiddle.net/ymma61hu/3/

For more information on the clearfix hack, visit:

https://css-tricks.com/snippets/css/clear-fix/

Here's another example using display: inline-block:

display: inline-block;

https://jsfiddle.net/vh49gtzL/

Answer №3

Hey, just make sure to nest your input elements within the same div as shown in this fiddle: https://jsfiddle.net/v5omym1a/

<div id="calltoaction-form" class="teaser-form">
  <div class="form-title">
    <h3>sample form</h3>
  </div>
  <form id="contact_form" action="_contact-us.php" method="post">
    <div class="form-header">
      <h4>Personal details</h4>
    </div>
    <div class="form-section">
      <input id="name" name="name" type="text" placeholder="Your name">
       <input id="email" name="email" type="text" placeholder="Your email">
    </div>

Answer №4

I made some improvements to your code. You don't have to enclose your <h3> and <h4> elements in div tags - they are block level elements that can be styled independently.

#calltoaction-form {
  background: #f2f2f2;
  padding-bottom: 10px;
  width: 800px;
  position: right;
  bottom: 0;
  overflow: hidden;
}

.form-section {
  float: left;
  width: 50%;
}

label {
  display: block;
  margin-bottom: .25em;
}
  <div id="calltoaction-form" class="teaser-form">
    <h3 class="form-title">sample form</h3>

    <form id="contact_form" action="_contact-us.php" method="post">

      <h4 class="form-header">Personal details</h4>

      <div class="form-section">
        <label for="name">Name</label>
        <input id="name" name="name" type="text" placeholder="Your name">
      </div>

      <div class="form-section">
        <label for="email">Email</label>
        <input id="email" name="email" type="text" placeholder="Your email">
      </div>

    </form>
  </div>

Answer №5

.form-section {
      float: left;
      margin: 1%;
      width: 48.5%;
  }
  .form-section input {
    width: 100%;
  }
  .form-section:first-child {
    margin-left: 0;
  }
  .form-section:last-child {
    margin-right: 0;
  }
#calltoaction-form {
  background: #f2f2f2;
  padding-bottom: 10px;
  width: 100%;
  position: right;
  bottom: 0
}
<div id="calltoaction-form" class="teaser-form">
  <div class="form-title">
    <h3>sample form</h3>
  </div>
  <form id="contact_form" action="_contact-us.php" method="post">
    <div class="form-header">
      <h4>Personal details</h4>
    </div>
    <div class="form-container">
      <div class="form-section">
        <input id="name" name="name" type="text" placeholder="Your name">
      </div>
      <div class="form-section">
        <input id="email" name="email" type="text" placeholder="Your email">
      </div>
    </div>

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

AngularJS making a HttpPost request resulting in a 500-Internal Server Error

I'm currently working on an application where I need to include a user in the database which requires a POST operation. However, every time I try to run the application, I encounter a 500-Internal Server Error for the POST API call. Here is a snippe ...

javascripthtmlangularjsasp.net-mvcasp.net-web-api

access pictures from a different directory using JavaScript

I am working with an images array that contains three jpg files. I am trying to set the background image of a class called pic using images from the array. The issue I'm facing is that the images are stored in an images folder with the URL images/. I ...

javascripthtmlcss

Eliminating the need for the horizontal scroll bar on the webpage

I'm dealing with a page that has multiple controls. Initially, there is no horizontal scrollbar on the page. However, as soon as I introduce an AjaxControlToolkit.Editor or a treeview onto the page, a horizontal scroll bar mysteriously appears. For ...

asp.nethtmlcss

Preserving chosen options in a dropdown menu using PHP and HTML

I'm facing an issue with my code where the selected values in a dropdown menu revert back to default every time the page refreshes. How can I ensure that the selected values remain unchanged? Unfortunately, I am unable to utilize AJAX as per the user ...

phphtml

Valid ways to ensure that a CSS image expands outside the boundaries of the containing div

I have inserted an image using the following CSS code: .imgtemp { float:right; top:0px; left:0px; overflow:visible; width:100%; } Although I have added the div tag to display it on the page, ...

htmlcss

What is the proper way to specify the type for a <video> element reference in React when utilizing Typescript?

I have been experimenting with controlling the play/pause state of a video in React.js using ref's. My code functions correctly but I am encountering tslint errors that I am currently trying to diagnose: function App() { const playVideo = (event:a ...

htmlreactjstypescriptdomuse-ref

Creating a gaming application with Phaser.js and Ionic with subpar rendering capabilities

Attention developers! I recently created a game app using Phaser.js. I integrated the code into an Ionic blank starter app, allowing the Ionic framework to render the view while Phaser takes care of displaying the game. Issue: The game is a simple flapp ...

javascripthtmlangularjsionic-frameworkphaser-framework

What is the best way to define coordinates or set margins for the autoTable component in jsPdf when using React js?

While working with the jsPdf library to create a PDF in React, I am encountering an issue where I am unable to set margins for the autoTable when there are multiple tables on a single page. Below is the code snippet: import React from "react"; ...

javascriptcssreactjsjspdfjspdf-autotable

Access the content of each cell in a table using JavaScript

I need help with a scenario involving a table that has 4 rows, where the 4th row contains a textbox. When the "onchange" event of the textbox is activated, I want to retrieve the data from the cells in that specific row and transfer it to another table. It ...

javascripthtml

Steps to properly insert an SVG into a button

I have a block set up with a Link and added text along with an svg image inside. How can I properly position it to the lower right corner of the button? (see photo) Additionally, is there a way to change the background color of the svg? This is within th ...

htmlreactjsnext.jssass

Enhancing security in client-server communication using HTML5 Ajax

Thank you for your assistance today. I am currently in the process of developing an HTML5 game and require guidance on the most effective method for Client Server communications. I am exploring alternatives to socket.io for undisclosed reasons. The key p ...

jqueryajaxjsonhtml

Adjust font size using jQuery to its maximum and minimum limits

My jQuery script enables me to adjust the font-size and line-height of my website's CSS. However, I want to restrict the increase size to three clicks and allow the decrease size only after the increase size link has been clicked - ensuring that the d ...

javascriptjquerycssfontsfont-size

Guide on making a flowchart using CSS

I'm working on creating a CSS flow chart diagram and I've included an image below for reference. Might there be a straightforward method to achieve this? I've been scouring the web for examples, but I'm unsure of what terminology to use ...

htmlcss

The webpage must be designed to be compatible with screen resolutions starting from 800 x 600 pixels and higher, utilizing Angular

I am working on developing a webpage that is specifically designed to work for resolutions of 800 x 600 pixels and higher. Any other resolutions will display the message "This website can only be accessed from desktops." Here is my approach using jQuery: ...

javascriptjqueryhtmlangularjscss

Navigating into iframe can be tricky when the previous iframe is not properly closed in Selenium Webdriver. Here

One issue we are facing is the excessive use of iframes in HTML. It has become troublesome to locate elements as some are buried within multiple layers of iframes. I'm trying to access an element inside the outermost iframe (the second one), but I&ap ...

htmliframeselenium-webdriver

extracting characters in php

Here's the HTML code I'm working with: <p style="color:red;font-size:12px;">This budget-friendly car offers great value, complete with air conditioning making it perfect for couples and small families. There is a ?500 excess, but it can be ...

phphtmlsubstring

Tips for eliminating the gap between Bootstrap 4 columns

Is there a way to eliminate the spacing between Bootstrap columns? I have three columns set up using Bootstrap but no matter what I do, I can't seem to get rid of the space between them. <!doctype html> <html lang="en> <head> ...

javascripthtmlcssbootstrap-4

Strange formatting in the internet explorer browser (IE)

I have encountered an issue with CSS animation elements on the home page. The animations appear correctly in Google Chrome, but there is a strange indentation problem when viewed in IE. I have tried several solutions without success. Although I am not a w ...

htmlcssinternet-explorer

Adjust the position if the height exceeds 100 pixels

Can someone help with this code issue? $(document).ready(function () { if ($('.pi-img').height() > 100) { $(this).css('top' , '30%'); console.log('yeah'); } }); I am encountering difficu ...

javascriptjquerycsshtml

Is there a way to increase the size of my ASP.NET CalendarExtender component?

As I work on adapting my company's website for mobile devices, I find myself facing a challenge with manipulating the CalendarExtender on one of the text fields. Although most of my experience lies in HTML manipulation rather than ASP.NET programming, ...

c#asp.nethtmlvisual-studio-2010calendarextender