Is there a way to align the text input and text area next to each other?

I need help with styling a contact form that consists of 4 text input fields and 1 text area.

Here is the current code for the contact form:

<form class="contact_form">
    <input type="text" placeholder="Name">
    <input type="text" placeholder="Company">
    <input type="email" placeholder="Email">
    <input type="text" placeholder="Contact No">
    <textarea placeholder="Your Enquiry"></textarea>
</form>

The CSS for the form currently looks like this:

.contact_form input {
    display: block;
    margin-bottom: 15px;
    width: 44%;
}

textarea {
    float: right;
}

Issue: When I apply a float:right to the textarea, it creates an undesirable space above it, as shown in this image: https://i.stack.imgur.com/82urB.png

Desired Output: The desired output should resemble this image: https://i.stack.imgur.com/98XNc.png

htmlcss

Answer №1

Give This Method a Shot:

<form class="contact_form"> 
    <div class="input-block">
        <input type="text" placeholder="Name"> 
        <input type="text" placeholder="Company">  
        <input type="email" placeholder="Email"> 
        <input type="text" placeholder="Phone Number"> 
    </div>
    <textarea placeholder="Your Inquiry"></textarea>
</form>

<style>
    .contact_form .input-block {
        float: left;
        width: 44%;
        margin-right: 10px;
    }
    .contact_form input,
    textarea {
        display: block;
        width: 100%;
        margin-bottom: 15px;
    }

    textarea {
        float: left;
    }
</style>

Answer №2

Creating a Contact Form in HTML

<form class="contact_form"> 
        <textarea placeholder="Please Enter Your Enquiry Here"></textarea>
        <input type="text" placeholder="Your Name"/>         
        <input type="text" placeholder="Company Name"/>  
        <input type="email" placeholder="Your Email Address"/> 
        <input type="text" placeholder="Contact Number" />         
</form>

View Demo Here

Answer №3

Apply CSS to

textarea {
    float: right;
    margin-right:1100px;
    margin-top:-170px;
 }

This will create the desired layout similar to what is displayed in your output image.

Answer №4

To implement this style, you just need to wrap the input field with a div element.

Check out the FIDDLE DEMO

.contact_form div {
    float:left;
    width: 44%;
}
.contact_form input {
    display: block;
    margin-bottom: 15px;
    width: 100%;
}
textarea {
    margin-left:10px;
}

Answer №5

What about starting with the textarea?

<form class="contact_form">
  <textarea placeholder="Your Message"></textarea> 
  <input type="text" placeholder="Name"> 
  <input type="text" placeholder="Company Name">  
  <input type="email" placeholder="Email Address"> 
  <input type="text" placeholder="Contact Number"> 
</form>

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

The website's scrolling speed is painfully slow

Currently, I am working on enhancing the performance of this site at . If you scroll through the site or navigate using the Up and Down Arrow Keys, you may notice a sluggish and slow Scroll Behaviour. I am utilizing HTML5 and simple img tags with 85% wid ...

performancehtmlcss

Tips on how to customize an HTML form submission appearance

Take a look at my file upload form below: <form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="filetoupload" id="filetoupload" onchange="this.form.submit();"> </form> I am trying to figure out ...

htmlcss

Having Trouble Choosing Options From Dropdown Menu Using Index in Selenium with Java

I am familiar with how to choose an element from a dropdown using the selectByIndex method. However, when attempting to use selectByIndex (select.selectByIndex(index)) on the HTML snippet below: <select id="destinationAllocationId" name="destinationAll ...

javahtmlseleniumselenium-webdriverdrop-down-menu

Is there a way to insert text onto an Isotope image?

I recently created a portfolio using Isotope and Jquery, but I am struggling to add descriptive text to my images without disrupting the layout of the portfolio. I have experimented with various options such as using position:relative for the images and p ...

jquerycssblogs

Show image details on hover?

I have six images displayed full width using a flex grid. I would like the image information (along with a visit button) to appear on hover, and the brightness of the image should decrease. I am struggling to position the information in the center of the i ...

htmlcss

What is the method for opening the image gallery in a Progressive Web App (PWA)?

I am struggling to figure out how to access the image gallery from a Progressive Web App (PWA). The PWA allows me to take pictures and upload them on a desktop, but when it comes to a mobile device, I can only access the camera to take photos. I have tried ...

htmltypescriptionic-frameworkprogressive-web-appsangular-pwa

Two nested divs positioned below text within a parent div

I am styling a content div with text and two child divs positioned next to each other within the content div. My goal is to have the child divs display below the text, rather than beside it. body { text-align: center; } #first, #second { border: so ...

htmlcss

Apply the `text-overflow: ellipsis` property to truncate the text of two items within a flex column, which is contained within

I am attempting to accomplish the following: Successfully implementing ellipsis for a single item is achieved with: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; However, my challenge lies in truncating two items. One should appear be ...

css

The image fails to display correctly

As I work on creating a basic webpage in HTML and JavaScript, my goal is to validate certain parameters (such as width, height) of an image that users upload via a form. In JavaScript, I extract the file from the form and attempt to display it as an image ...

javascripthtml

Effective techniques for managing PHP forms within HTML and CSS by utilizing checkboxes:

I'm struggling with my code, particularly the form section. Here is the HTML code snippet: <form action="index.php/homepage/deleteSelected" method="POST"> <input type="submit" value="Delete Selected"> ...

phphtmlcssajax

Scrolling down a jQuery div after each new item is added.OR

I have a div acting as a chat feature, where messages are appended based on user actions. I am trying to make it so that the div automatically scrolls down after each message is added, but I'm encountering some issues with this functionality. You can ...

javascriptjqueryhtmlcss

Trigger an immediate Primefaces update using a JavaScript function

Having an issue where: upon page load, I attach a 'keypress' event listener to every input field on the page. The goal is to check for special characters in the input and remove them. Below is the function that executes on page load: function ...

javascripthtmlajaxprimefaces

Tips for verifying that a file has not been selected in Croppie

Whenever I use croppie to crop images on my website, everything works fine when I select an image and upload it. But if I try to crop and upload without selecting an image, a black image gets uploaded instead. How can I validate if the file upload is empty ...

javascriptphpjqueryhtmlcodeigniter-3

"Exploring the World of Mobile Development and Screen Size

Currently, I am in the process of creating a basic mobile website that can be accessed through a QR code leading to the page linked below. However, I have encountered an issue where viewing it on my Android or Apple phone results in excess width. Any advic ...

htmlcssmobilecross-browser

Out of the blue div, could you lend your assistance?

I have a code that displays 5 random images with corresponding text. My challenge is that I want to separate the text into another div so that I can add another function to it, while still keeping the images random with their corresponding text. <scr ...

javascripthtmlcss

Removing HTML tags from a string while preserving specific tags in JavaScript

Here is a JavaScript string that I am working with: var test = "<p>test</p> FOLER.PRODUCTS<12345><level-2>"; I'm trying to remove the HTML tags from the string because the service I'm using doesn't accept them. Here ...

javascripthtml

Retrieve outcome from successful AJAX post and update HTML using globalEval

I have a function in JQuery that asynchronously posts data function post_data_async_globalEval(post_url, post_data, globaleval) { $.ajax({ type: 'POST', url: post_url, data: post_data, dataType: 'html', async: true, ...

javascriptjqueryhtmlajax

"Internet Explorer naturally selects the submit button when users press the enter key to submit a

In my current application, I have implemented a form with a hidden button to address issues with the numeric keyboard on Android. Essentially, pressing enter or focusing on the invisible button will trigger form submission. Pressing enter works fine in Ch ...

javascripthtmlformsknockout.js

Data is not displaying correctly in the Angular Material Table

I'm currently trying to build a mat table based on an online tutorial, but I'm facing a problem where the table appears empty even though I have hard coded data. As someone new to Angular and HTML/CSS, I'm struggling to understand why the ma ...

htmlcssangulartypescriptangular-material-table

Ways to conceal an element in Angular based on the truth of one of two conditions

Is there a way to hide an element in Angular if a specific condition is true? I attempted using *ngIf="productID == category.Lane || productID == category.Val", but it did not work as expected. <label>ProductID</label> <ng-select ...

javascripthtmlangulartypescript