Trouble getting site structure to work

1

Hi, I was doing the survey site challenge and I have some code here on a codepen from it. There’s something that I haven’t been able to figure out.

If I make a third radio button or a third checkbox, these mess up the page structure and I can’t figure out why or how to fix it.

Apparently I’m not allowed to post the link to the codepen so I’m not sure what to do here, I’ll just post the whole code?

@import url('https://fonts.googleapis.com/css?family=Margarine'); body { background: linear-gradient(195deg, #4e9131, #527842, #46941c, #41633c); } .content { max-width: 500px; margin: auto; background: linear-gradient(95deg, #a8ff79, #7cc75a); padding-left: 20px; } #title { font-family: Margarine; font-size: 42px; } p { font-family: Margarine; } label { float: left; padding-right: 10px; width: 100px; text-align: right; margin-top: 10px; clear: left; } input, textarea, select { margin-top: 10px; } #interest-label { ; } #submit-form { margin-left: 100px; padding: 15px; }

Take our survey!

We appreaciate your service! If you would like, please let us know how we are doing by filling out our survey.

  <form action="index.html" method="post" id="survey-form">

    <Section id="contactinfo">
      <div>
        <label id="name-label" for="name">Name:</label>
        <input type="text" name="name" placeholder="Enter your name" id="name" required>
      </div>
      <div>
        <label id="email-label" for="email">E-Mail:</label>
        <input type="email" name="email" placeholder="Enter your e-mail" id="email" required>
      </div>
      <div>
        <label id="number-label" for="phone">Phone:</label>
        <input type="number" name="phone" placeholder="Enter your phone number">
      </div>
      <div>
        <label id="age-label" for="phone">Age:</label>
        <input type="number" name="age" placeholder="Age"
        min="18" max="100" id="number">
      </div>
      <div>
        <label id="interest-label" for="interest">Interest:</label>
        <input type="checkbox" name="stock1" value="old">Old stock<br>
        <input type="checkbox" name="stock2" value="new">New stock<br>
      </div>
      <div>
        <label id="gender-label" for="gender">Gender:</label>
        <input type="radio" name="gender" value="male"> Male<br>
        <input type="radio" name="gender" value="female"> Female
      </div>
    </section>

    <section id="approval">
      <div>
        <label id="ratinglabel" for="rating">Order quality:</label>
        <select name="rating" id="dropdown">
          <option value="excellent">Excellent</option>
          <option value="good">Good</option>
          <option value="fair">Fair</option>
          <option value="poor">Poor</option>
        </select>
      </div>
    </section>

    <section id="comments">
      <div>
      <label id="messagelabel" for="message">Comments:</label>
        <textarea name="message"
        rows = 4 cols = 30 id="textinput">
        </textarea>
      </div>
    </section>

  <section id="submission">
    <div id="submit-form">
      <input type="submit" name="submit" id="submit">
    </div>
  </section>

  </form>
</div>
</main>
2

Well that didn’t really work like I thought it would…

3

To format your code you need three backticks on their own line above the code, and three backticks on their own line below your code
You can select everything and use the preformatted text button (</>) in the message editor here in the forum and the backticks appear automatically

4

This is what I was having issues with:

<style>
  @import url('https://fonts.googleapis.com/css?family=Margarine');
  body {
    background: linear-gradient(195deg, #4e9131, #527842, #46941c, #41633c);
  }
  .content {
    max-width: 500px;
    margin: auto;
    background: linear-gradient(95deg, #a8ff79, #7cc75a);
    padding-left: 20px;
  }
  #title {
    font-family: Margarine;
    font-size: 42px;
  }
  p {
    font-family: Margarine;
  }
  label {
    float: left;
    padding-right: 10px;
    width: 100px;
    text-align: right;
    margin-top: 10px;
    clear: left;
  }
  input, textarea, select {
    margin-top: 10px;
  }
  #interest-label {
    ;
  }
  #submit-form {
    margin-left: 100px;
    padding: 15px;
  }
  .buttons {
    display:inline-block
  }

</style>

<html>

  <body>
    <main>
    <div class="content">
      <h1 id="title">Take our survey!</h1>
      <article>
        <p id="description">We appreaciate your service! If you would like, please let us know
        how we are doing by filling out our survey.</p>
      </article>

      <form action="index.html" method="post" id="survey-form">

        <Section id="contactinfo">
          <div>
            <label id="name-label" for="name">Name:</label>
            <input type="text" name="name" placeholder="Enter your name" id="name" required>
          </div>
          <div>
            <label id="email-label" for="email">E-Mail:</label>
            <input type="email" name="email" placeholder="Enter your e-mail" id="email" required>
          </div>
          <div>
            <label id="number-label" for="phone">Phone:</label>
            <input type="number" name="phone" placeholder="Enter your phone number">
          </div>
          <div>
            <label id="age-label" for="phone">Age:</label>
            <input type="number" name="age" placeholder="Age"
            min="18" max="100" id="number">
          </div>
          <div>
            <label id="interest-label" for="interest">Interest:</label>
          <div class="buttons">
            <input type="checkbox" name="stock1" value="old">Old stock<br>
            <input type="checkbox" name="stock2" value="new">New stock<br>
                        <input type="checkbox" name="stock1" value="old">Old stock
            </div>
          </div>
          <div>
            <label id="gender-label" for="gender">Gender:</label>
            <input type="radio" name="gender" value="male"> Male<br>
            <input type="radio" name="gender" value="female"> Female<br>
             <input type="radio" name="gender" value="female"> Female
          </div>
        </section>

        <section id="approval">
          <div>
            <label id="ratinglabel" for="rating">Order quality:</label>
            <select name="rating" id="dropdown">
              <option value="excellent">Excellent</option>
              <option value="good">Good</option>
              <option value="fair">Fair</option>
              <option value="poor">Poor</option>
            </select>
          </div>
        </section>

        <section id="comments">
          <div>
          <label id="messagelabel" for="message">Comments:</label>
            <textarea name="message"
            rows = 4 cols = 30 id="textinput">
            </textarea>
          </div>
        </section>

      <section id="submission">
        <div id="submit-form">
          <input type="submit" name="submit" id="submit">
        </div>
      </section>

      </form>
    </div>
    </main>
  </body>

</html>

I ended up getting a solution on Stack Overflow. As is it was explained to me, “Two checkboxes/radios still generate little enough “height” to be kept next to the labels, but any more are allowed to flow under it.” So then wrapping the buttons in a div and styling them with display:inline-block fixed the issue. It looks like it’s time for me to study flexbox and grids more.