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

What could be causing my JavaScript source to fail to load in an HTML document?

Currently, I am in the process of creating a basic offline dinosaur game using HTML, JS, and CSS that is well-known to everyone. I have been diligently working on it and have successfully made everything function for a few hours. However, out of nowhere, m ...

javascripthtmlsrc

Guide on making a color legend with JavaScript hover effects

On my website, there is a dynamic element that displays a table when values are present and hides it when there are no values. The values in the table are color-coded to represent different definitions. I wanted to add hover text with a color key for these ...

javascriptjqueryhtmlcsshover

What are some methods to design distinct angular ui bootstrap dialogs?

Is there a way to customize angular-ui bootstrap modal dialogs so that they have distinct colors and sizes from each other? I can style them globally for the site but not individually. I came across a similar question, but it only addresses changing all d ...

htmlcssangularjsangular-ui-bootstrap

What is the best way to ensure that TwentyTwenty.js images are always positioned in the

Looking to utilize the TwentyTwenty.js code for image comparison, but facing an issue where the images are aligned to the left side. Is there a way to keep them centered without explicitly setting the width on the container? <div id="beforeafter" class ...

jquerycsstwentytwenty

Strange HTML pop-up keeps appearing every time I use styles in my code or insert anything with CSS

Recently, I created an OctoberCMS backend setup through my cPanel (I also have one on my localhost). Now, I am trying to add a background image but every time I attempt to do so, a strange HTML popup appears that I can't seem to figure out. Here is th ...

phphtmlcsscontent-management-systemoctobercms

Utilizing JQuery to track DIV clicks

I am encountering an issue with DIV clicks while using JQuery. I need guidance on this problem. Within my HTML, there are three designated DIV elements: <html> <body> <div id="overviewContainer"> <div id="firstContainer"></ ...

jqueryhtmlclick

Creating an arrow icon alongside a pseudo:hover::before element

This is my custom code snippet: .privacycheck1 { position: relative; top: 265px; background-color: #CF0000; width: 24px; height: 24px; left: 843px; border-radius: 50px; border: 5px #E60000; } .privacycheck1::before { position: relative ...

htmlcsscss-shapes

Display validation messages when the user either clicks out of the textbox or finishes typing

Here are some validation messages: <form name="dnaform" novalidate> <div style="padding-bottom:5px" ng-show="dnaform.uEmail.$pristine || dnaform.uEmail.$valid">Active directory account </div> <div style="padding-bottom:5px;" n ...

javascripthtmlcssangularjs

The @Html.Label feature fails to appear when the content includes a period (.) - Utilizing Bootstrap with MVC Razor

I am dynamically populating label text from a database source <div class="col-11 col-sm-11 col-md-11 col-lg-11 col-xl-11"> @Html.Label(@Model.Questions[i].DataText + ": ", new { @for = "dd" + @Model.Questions[i].Data ...

c#htmlasp.net-mvcrazorbootstrap-4

Unable to create a polygon on the Google Maps API using GPS coordinates inputted from a text field

I am currently developing an interactive map using the Google Maps API. The map includes a floating panel with two input fields where I can enter GPS coordinates. My goal is to create markers and connect them to form a polygon. While I can easily draw lin ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

What techniques can I use to generate a 3D visual effect by shifting the background image layer as the user scrolls (creating a Parallax effect

I have combined two images in the heading; one on top of the other. My goal is to create a subtle vertical movement in the background image as the user scrolls, giving the illusion of depth. Both images share the same width, but the background image is tal ...

javascripthtmlcss3dparallax

String object causing jQuery selector to malfunction

const newHTML = '<html><head><title>Hello</title><link rel="apple-icon-touch-precomposed" href="image.jpg" /></head><body></body></html>'; alert($(newHTML).find('link[rel="apple-icon-touc ...

javascriptjqueryhtmlstring

Changing the image's flex-grow property will take precedence over the flex settings of other child

This is the error code I am encountering, where "text1" seems to be overridden <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!--mobile friendly--> <meta name="view ...

javascripthtmlcss

Step-by-step guide on arranging/placing/styling two div elements next to each other

I'm facing an issue with my CSS and HTML. I can't seem to get the 2 footer items to display on the same line. Is there a problem with how I've structured my divs and styles? Any suggestions for improving the code are greatly appreciated. I& ...

htmlcss

Making use of CSS to manipulate the placement of images within a grid

I've been struggling to insert an image into a grid, and it's causing some issues for me. Currently, the main problem I'm facing is that it's pushing another grid item down. body { padding: 0; margin: 0; } .main { wi ...

htmlcsscss-grid

Is it necessary to restart the IIS Site when altering the contents of index.html?

I am currently working on updating a website that runs on a Custom Designed CMS with files using the .asp extension. The site seems to be quite dated and is hosted on an IIS Server, which I do not have direct access to. The user has requested some changes ...

htmlcssiiscontent-management-system

Using the "export default" feature in React.js is a

Is it possible to name an exported function as "default" without encountering an error? export default() => { const [width, setWidth] = useState(0); const [height, setHeight] = useState(0); useEffect(() => { setTimeout(() => { setWidth(window.i ...

javascripthtmlreactjs

Ensure the bottom div is anchored with a top margin

I am attempting to design a contact/information section at the bottom of my webpage, similar to the grey area at the bottom of this site. Here is my HTML code: *{margin:0; padding:0; box-sizing: border-box;} body{ padding-bottom: 0; } body .main{ marg ...

htmlcss

Site's design compromised by AJAX refresh intervention

Every time I run this code, the page ends up repeating itself. Adding to that, it doesn't refresh as required. Here is how it should work: Image Updated code segment below: <?php include 'config.php' ?> <script language="javascr ...

phphtmlajax

What steps should I take in modifying my existing code to use jQuery to set my div to a minimum height rather than a fixed height?

Could someone assist me in adjusting my div to have a min-height instead of a regular height? Whenever I click on the "Learn more" button, it extends past my div because the function is designed to set a specific height rather than an equal height. $.fn.e ...

javascriptjqueryhtmlcss