Fixing HTML form in CSS

Question

Is there a way to fix a form in such a way that the form does not fluctuate?

The desired shape of the form is:

The actual shape of the form fluctuates:

Here is the .css:

    form {

     background-color: white;
     padding: 20px;
     border: 1px solid black;
     position: fixed;
     top: 80%;
     left: 50%;
     transform: translate(-50%, -80%);
     float: left;
}

#textarea-container {
     float:right;
}
#inputs-container {
     float: left;
     width: 145px;
}

input[type=text] {
     width: 100%;
}


input, textarea {

     display: block;

}

textarea {
     height: 100px;
     width: 140px;
}

If you look at the .css, the form property for position is marked as fixed but the form still fluctuates.

Here is the HTML

  <form name="contactform" method="post" action="mail.php">
  <div id="textarea-container">
    <textarea  name="questions" placeholder="Questions" maxlength="1000" cols="25" rows="6"></textarea>
  </div>
  <div id="inputs-container">
      <input  type="text" name="first_name" placeholder="First Name">
      <input  type="text" name="last_name" placeholder="Last Name">
      <input  type="text" name="email" placeholder="Email">
      <input  type="text" name="telephone" placeholder="Telephone">
    </div >
<input  id="submit" type="submit" value="Submit">
</form>

jordan · Accepted Answer · 2015-11-22 19:57:54Z

1

Since you have floats on the two divs inside the form, you'll need to put a wrapper around them and set a fixed width, ie:

  <form name="contactform" method="post" action="mail.php">
    <div id="wrapper">
      <div id="textarea-container">
        <textarea  name="questions" placeholder="Questions" maxlength="1000" cols="25" rows="6"></textarea>
      </div>
      <div id="inputs-container">
        <input  type="text" name="first_name" placeholder="First Name">
        <input  type="text" name="last_name" placeholder="Last Name">
        <input  type="text" name="email" placeholder="Email">
        <input  type="text" name="telephone" placeholder="Telephone">
      </div >
    </div>
    <input  id="submit" type="submit" value="Submit">
  </form>

and

#wrapper{
    width:250px;
}

answered Nov 22, 2015 at 19:57

jordan

11k10 gold badges47 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eric Over a year ago

Excellent! Thanks for the awesome answer!

Collectives™ on Stack Overflow

Fixing HTML form in CSS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related