Aligning text fields and text areas is not consistent

Seeking a solution to align two input fields side by side, with a textarea directly below them

form ul {
  list-style: none;
  text-align: center;
}
form ul li {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}
#nameform,
#emailform,
#messageform {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-color: #cfcfcf;
  font-size: 15px;
  border: 1px solid #ccc;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding: 4px 7px;
  outline: 0;
  -webkit-appearance: none
}
#nameform,
#emailform {
  margin-left: auto;
  margin-right: auto;
  height: 35;
}
#messageform {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
<div id="contactform">
  <form>

    <ul>
      <li>
        <input type="text" name="name" placeholder="name" id="nameform" size="35"></input>
      <li>
      <li>
        <input type="text" name="email" placeholder="email" id="emailform" size="35">
        </innput>
      <li>
    </ul>

    <textarea type="text" name="message" placeholder="Message" id="messageform" rows="4" cols="80"></textarea>
  </form>

</div>

Encountering an issue where the textarea appears misaligned on Google and IE:

Any suggestions on how to properly center the textarea beneath the two input fields?

htmlcsscentering

Answer №1

There were some syntax errors in your code which I have corrected slightly. Take a look at the revised version here.

form ul{
 list-style: none;
 text-align:center;
}

form ul li {
 display: inline-block;
 margin-left: auto;
 margin-right: auto;
}


#nameform, #emailform, #messageform {
 font-family: 'Open Sans', sans-serif;
 font-weight: 300;
 font-color: #cfcfcf; 
 font-size: 15px;
 border: 1px solid #ccc;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 padding: 4px 7px;
 outline: 0;
 -webkit-appearance: none
}

#nameform, #emailform {
  margin-left: auto;
  margin-right: auto;
  height: 35;
}

#messageform {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

Answer №2

There are numerous syntax errors and unnecessary settings in this code snippet, some of which may be needed for styling purposes but are not essential to solving the issue at hand.

My proposed solution to this problem is outlined below.

form ul {
  list-style: none;         
  margin: 0;                 
  font-size: 0;              
  padding: 5px;              
}
form ul li {
  display: inline-block;     
  width: 50%;                
  box-sizing: border-box;    
  padding: 5px;              
}
form ul li:nth-child(3) {
  width: 100%;               
}
form ul li input,
#messageform {
  width: 100%;               
  box-sizing: border-box;    
}

/* Environment */ body { margin: 0; }
<div id="contactform">
  <form>
    <ul>
      <li>
        <input type="text" name="name" placeholder="name" id="nameform">
      </li>
      <li>
        <input type="text" name="email" placeholder="email" id="emailform">
      </li>
      <li>
        <textarea type="text" name="message" placeholder="Message" id="messageform" rows="4"></textarea>
      </li>
    </ul>
  </form>
</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

Finding the height of concealed content within a div using the overflow:hidden setup

I'm trying to create a div that expands when clicked to reveal its content. I've taken the following steps so far: Established a div with overflow:hidden property Developed a JavaScript function that switches between a "minimized" and "maximize ...

javascripthtmlcss

What is the best way to place a horizontal line behind buttons in a design?

Hello, I was experimenting with creating a background line behind the buttons on my webpage. Previously, I used an image for this purpose but now I want to achieve the same effect using a line. <div class="feedback-option"> <div class="radios2" ...

htmlcss

Achieve a flat text indentation similar to an ordered list using CSS

Is there a way to format my FAQ Q & A like an ordered list? <div class="col-left"> <h3><strong>CAPTION</strong></h3> <ul> <li>Q: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspe ...

htmlcss

Utilize React Material UI Slider to dynamically adjust Border Radius in your web design

Utilizing React Material UI's components like the slider and button is essential for this project. The main objective is to dynamically change the border radius of the button using the value obtained from the slider. However, there seems to be a chall ...

cssreactjsbuttonmaterial-uislider

What is the best way to display all of these JSON objects on a webpage given the current AJAX setup?

I need help figuring out how to display all the objects and their contents from a JSON file on a webpage when a button is clicked. I don't want to use console.log, I actually want it to show on the webpage but I'm unsure of how to do that. Please ...

javascripthtmljsonajax

Compilation of CSS by Webpack resulting in peculiar class identifiers

Currently, I am using webpack for developing a React app with a NodeJS backend. I've encountered an issue with styling the app as webpack seems to be interfering with my CSS, causing changes in class names. For example, in my base.css file, I have d ...

cssnode.jsreactjswebpack

What is causing the col-auto with the red border to exceed its available height?

For this code, I've utilized version 5 of Bootstrap. In full screen width, the col-auto with the red border seems to be taking up more space than its content. The yellow border marks the available content space inside. I'm curious about what migh ...

htmlcssbootstrap-5

Struggling to get the fluid image feature to work properly on Bootstrap 4

I seem to be facing an issue with creating responsive images using Bootstrap 4. Whenever I view the code below on a browser, I see three images in the navbar at the top left corner. Unfortunately, these images do not scale down in size when viewed on mobil ...

htmlcssbootstrap-4

The right alignment for ul and li styles is recommended for a cleaner appearance

Here is the fiddle provided below: http://jsfiddle.net/Fx9rA/ <div id="wrap"> <ul id="accordion"> <li> <h2 id="first">CMT</h2> <div class="content"> ...

htmlcss

Creating a navigation bar that smoothly slides into view from the top

In my Angular app (version 2+), the current code I have is: .header { background: rgba(white, 0); &.fixed-top { background: rgba(white, 1); border-bottom: solid whitesmoke 1px; position: fixed; top: 0; right: 0; left: 0; ...

cssangularcss-animations

Utilizing Jquery's Selectable IDs in a repetitive manner

I'm a newbie to jQuery and I'm attempting to create two lists where each item can be selected. Check out my code: <!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI s ...

javascriptjqueryhtmllistjquery-ui-selectable

Using Javascript to Change Background Color on Button Click

The button press does not result in a change of the background color. What could be causing this issue? var body = document.getElementsByTagName("body"); var bgbutton = doucument.getElementById("bgchange"); bgbutton.onclick = function() { body.style.b ...

javascripthtmlcss

Tips for adjusting CSS font sizes within a contenteditable element?

I am looking to develop a compact HTML editor using JavaScript that allows me to customize the font-size of selected text with a specific CSS value. The documentation states that the FontSize command is used like this: document.execCommand("FontSize", fal ...

javascripthtmlcontenteditable

Horizontal SWF's are providing spaces of white in between them

I'm struggling with removing the white space between SWFs on my HTML page. I've tried using 'block' in CSS, but it's not working for a horizontal layout. Adding "0" for the border hasn't helped either. I'm getting frustr ...

htmlcssflashactionscript-3

Troubleshooting problem with spacing on three horizontal divs

I am currently working on building an E-commerce website to gain some practice. Here is how the div is set up: .small-container { max-width: 1080px; margin: 5px; padding-left: 25px; padding-right: 25px; } .col-4 { flex-basis: 25%; padding ...

htmlcss

Why is it important to have specific property names?

Here is some code and HTML for triggering a radio button. It seems to work fine without any issues, but I'm wondering if the presence of a name property is necessary. When I remove the name property, it stops working. Can someone explain why? <inp ...

javascriptjqueryhtml

Tips for limiting users to inputting only alphanumeric characters and excluding special characters in an input field using Angular 8

How can I prevent users from inputting special characters in an input field and only allow alphanumeric values? The code that I have implemented so far does not seem to be working as intended. When a user enters a special character, it still shows up in th ...

javascripthtmlangulartypescript

Aligning a child element in the center along the horizontal axis within a parent container that is smaller in width than

I have been attempting to center an <img> element horizontally within a <div> that is narrower than the image itself. The <div> has overflow: hidden applied to it. For example, if the image is 500px wide and the DIV is 250px wide, is the ...

htmlcss

The <nav> and <section> elements are not appearing on the page

Website: CSS: Hello there! I am experiencing an issue where the nav and section elements are not displaying on my website. They seem to only show the height and background-color attributes. Interestingly, they appear correctly on my old Firefox version ( ...

csshtmlnav

Limit the text input area in HTML to a fixed size, preventing any text from exceeding the specified boundary

Is there a way to create a fixed line text area that limits the user from typing beyond a certain number of lines and maximum width? My current CSS styling for this is as follows: .area-style { resize: none; width: 324px; height: 200px; m ...

javascriptcsshtmltextarea