briggleshiggle
briggleshiggle

Reputation: 41

Curious as to why my input elements are not on the same line as my label

Trying to move my input boxes in this form up next to my label and I'm not sure what I did wrong that got the input to wrap to the next line. Any ideas? Provided both the HTML and CSS code for reference.

/* Field set styles */

fieldset {
  background-color: rgb(255, 246, 205);
  border: 1px solid rgb(233, 69, 0);
  float: left;
  margin: 10px 0px 10px 2.5%;
}

fieldset#custName,
fieldset#experience {
  width: 46%;
}

legend {
  background-color: rgb(233, 69, 0);
  color: white;
  padding: 3px 0px;
  text-indent: 5px;
  width: 100%;
}


/* Label styles */

label {
  clear: left;
  display: block;
  float: left;
  font-size: 0.9em;
  margin: 7px 4% 7px 5px;
  width: 40%;
}


/* Input control styles */

input {
  display: block;
  float: left;
  font-size: 0.9em;
  margin: 7px 0px;
  width: 50%;
}

input#state {
  width: 50px;
}


/* Selection list styles */

select {
  display: block;
  float: left;
  font-size: 0.9em;
  margin: 7px 0px;
}


/* Option button styles */

fieldset.optionGroup {
  border-width: 0px;
}

fieldset.optionGroup label {
  display: inline;
  float: none;
  margin: 0px 3px 0px 0px;
  width: 30px;
}

fieldset.optionGroup input {
  display: inline;
  float: none;
  margin: 0px 20px 0px 0px;
  width: 20px;
}


/* Text area styles */

textarea {
  display: block;
  font-size: 0.9em;
  float: left;
  height: 150px;
  margin: 10px 0px;
  width: 100%;
}
<fieldset id="experience">
  <legend>Share Your Experience at Red Ball Pizza</legend>

  <label for="dateofvisit">Date of visit</label>
  <input name="dateofvisit" id="dateofvisit" />

  <label for="receipt">Receipt number</label>
  <input name="receipt" id="receipt" placeholder="re-nnnnnn" />

  <label for="ordertype">Order Type</input>
          <select name="ordertype" id="ordertype">
              <option value="type1">Carry out</option>
              <option value="type2">Delivery</option>
              <option value="type3" selected="selected">Dine in</option>
              <option value="type4">Take and bake</option>
          </select>
  
          <label>Was your service friendly?</label>
  <fieldset class="optionGroup">
    <label for="sYes">Yes</label>
    <input type="radio" name="serviceFriendly" id="sYes" value="yes" />
    <label for="sNo">No</label>
    <input type="radio" name="serviceFriendly" id="sNo" value="no" />
  </fieldset>

  <label>Was your order correct?</label>
  <fieldset class="optionGroup">
    <label for="oYes">Yes</label>
    <input type="radio" name="orderCorrect" id="oYes" value="yes" />
    <label for="oNo">No</label>
    <input type="radio" name="orderCorrect" id="oNo" value="no" />
  </fieldset>

  <label>Was your food hot?</label>
  <fieldset class="optionGroup">
    <label for="hotYes">Yes</label>
    <input type="radio" name="foodHot" id="hotYes" value="yes" />

    <label for="hotNo">No</label>
    <input type="radio" name="foodHot" id="hotNo" value="no" />
  </fieldset>

  <label for="comments">Tell us more abut your experience!</label>
  <textarea name="comments" id="comments"></textarea>

</fieldset>

Upvotes: 0

Views: 37

Answers (1)

hungerstar
hungerstar

Reputation: 21685

You have </input> for the closing tag for one of your labels. Change

<label for="ordertype">Order Type</input>

to

<label for="ordertype">Order Type</label>

This created a context/container that had 40% width of the fieldset, which was meant for an individual label.

Upvotes: 1

Related Questions