0

I have a two problems with a form that I am working on. Problem one is that I cannot get the form to center in the page. The second problem is that I have the submit button that won't center inside of the form.

fieldset {
  display: block;
  margin: 0 auto;
  border: 1px solid rgb(233, 69, 0);
  width: 40%;
}
legend {
  background-color: rgb(233, 69, 0);
  color: white;
  padding: 3px 0px;
  text-indent: 5px;
  width: 100%;
}
label {
  clear: left;
  display: block;
  float: left;
  font-size: 0.9em;
  margin: 7px 4% 7px 5px;
  width: 40%;
}
input {
  display: block;
  font-size: 0.9em;
  margin: 7px 0px;
  width: 50%;
}
textarea {
  display: block;
  font-size: 0.9em;
  float: left;
  height: 150px;
  margin: 10px 0px;
  width: 600%;
}
form p {
  text-align: center;
}
input[type="submit"] {
  display: block;
  float: none;
  height: 40px;
  width: 200px;
}
input:focus,
select:focus,
textarea:focus {
  background-color: rgb(220, 255, 220);
}
input:focus:valid {
  background-color: rgb(220, 255, 220) url("go.png") bottom right no-repeat;
  -o-background-size: contain;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  background-size: contain;
}
input:focus:invalid {
  background-color: rgb(255, 232, 233) url("stop.png") bottom right no-repeat;
  -o-background-size: contain;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  background-size: contain;
}
<section>
  <p>Please type in your information so I can send you the newsletter.
    <br>Required values are marked by an asterisk (*)</p>
  <form id="newsletter" onsubmit="return validateForm()" method="post">
    <fieldset id="personal">
      <legend>Personal Information</legend>
      <label for="name">Name: *</label>
      <input type="text" name="name" id="name" size="40">
      <br>
      <label for="eMail">E-mail Address: *</label>
      <input type="text" name="eMail" id="eMail">
      <br>
      <label for="favBeer">Favorite Beer Style:</label>
      <select name="favBeer" id="favBeer">
        <option value="IPA">IPA</option>
        <option value="Saison">Saison</option>
        <option value="Porter">Porter</option>
        <option value="Pilsner">Pilsner</option>
        <option value="Hefeweizen">Hefeweizen</option>
        <option value="Stout">Stout</option>
        <option value="Other">Other</option>
      </select>
      <br>
      <label for="comments">Additional Information:
        <label>
          <textarea name="comments" id="comments" cols="55" rows="5"></textarea>
          <div class="button">
            <input type="submit" value="Sign Me Up" />
          </div>
    </fieldset>

</section>

1

2 Answers 2

1

You don't close the last two <label>s anywhere. The correct code is:

  <label for="comments">Additional Information:
    <label>
      <textarea name="comments" id="comments" cols="55" rows="5></textarea>
    </label>
  </label>

  <div class="button">
    <input type="submit" value="Sign Me Up" />
  </div>
</fieldset>

You need to edit the css to keep the button at the bottom with clear and to center the button:

.button {      /*     */
  clear: left; /* NEW */
}              /*     */

input[type="submit"] {
  display: block;
  float: none;
  height: 40px;
  width: 200px;
  margin: 0 auto; /* NEW */
}

Working example: https://jsfiddle.net/m0g9tzxz/1/embedded/result/

1
  • That was just what I was looking for. Thanks a lot @TuomasK
    – Ph1shPhryd
    Commented Nov 6, 2015 at 20:47
1

You can't specify margin twice in your fieldset:

margin: 0 auto;
border: 1px solid rgb(233, 69, 0);
margin: 10px 0px 10px 5%;   <--- Bad

You should have margin: 0 auto; on the fieldset and all of the controls in the fieldset should belong to a div where your other margin is applied.

EDIT: This is a hack of the lower portion of the fieldset to get it to behave in the expected manner:

<fieldset id="personal">
      <legend>Personal Information</legend>
      <label for="name">Name: *</label>
      <input type="text" name="name" id="name" size="40">
      <br>
      <label for="eMail">E-mail Address: *</label>
      <input type="text" name="eMail" id="eMail">
      <br>
      <label for="favBeer">Favorite Beer Style:</label>
      <select name="favBeer" id="favBeer">
        <option value="IPA">IPA</option>
        <option value="Saison">Saison</option>
        <option value="Porter">Porter</option>
        <option value="Pilsner">Pilsner</option>
        <option value="Hefeweizen">Hefeweizen</option>
        <option value="Stout">Stout</option>
        <option value="Other">Other</option>
      </select>
      <br>
      <label for="comments">Additional Information:</label>     
          <textarea name="comments" id="comments" style="float: left; margin: 0 auto; width: 50%" rows="5"></textarea>
          <div class="button" style="margin: 0 auto; width: 200px;display: block;">
            <input type="submit" value="Sign Me Up">
          </div>
</fieldset>
8
  • I didn't even see that. Thanks. How would I go about getting the Submit button to center.
    – Ph1shPhryd
    Commented Nov 6, 2015 at 19:32
  • @Ph1shPhryd input { float: left} affects all inputs including the submit button. Try input[type="submit"] {float:none;}
    – zer00ne
    Commented Nov 6, 2015 at 19:36
  • @Ph1shPhryd: My first question would be why is the button and the textarea inside a label? The simplest method would probably be to get them out of the label control and apply either a margin or text-align:center to the div Commented Nov 6, 2015 at 19:36
  • @zer00ne: Actually, yah, that's also going to get in the way no matter what. Good catch. Commented Nov 6, 2015 at 19:37
  • @JoelEtherton - So your idea would be to take the div class="button and move that outside the fieldset and style it with margin: 0 auto;?
    – Ph1shPhryd
    Commented Nov 6, 2015 at 19:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.