Float CSS attribute causing parent div not to inherit height?

Question

I have an element in a div set to float: right however, it causes the outermost div not to wrap around. This is jsfiddle for it.

body {
  font-family: segoeui, Helvetica, arial;
  background: url('../images/green11.jpg') no-repeat center;
  /*#11345d*/
  color: #fff;
}

.display {
  /* border: 3px solid #fff; */
  background: #000;
  padding-bottom: 15px;
  padding-top: 15px;
  opacity: .8;

  width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.centredContent {
  margin-left: auto;
  margin-right: auto;
  width: 540px;
}

.centredText {
  text-align: center;
}

.right {
  text-align: right;

}

.text {
  width: 300px;
  font-size: 20px;
}


.element * {
  padding: 15px;
  margin-bottom: 20px;

}

.element label {
  float: left;
  width: 156px;
  font-weight: 700;
}

.element input.text {
  float: left;
  width: 300px;
  padding-left: 20px;
}

h1.centredContent {
  margin-bottom: 30px;
}

.element #submit {
  /* When set to float right it breaks and the form doesnt inherit its height... */
  /* float: right; */
}

<div class="display">
  <h1 class="centredText">Form Practice</h1> <br /><br />

  <form id="form" method="POST" class="centredContent" action="displayResults">

    <div class="element">
      <label>Line 1: </label>
      <input class="text" type="text" name="moduleName" value="" />
    </div>
    <div class="element">
      <label>Line 2: </label>
      <input class="text" type="text" name="studentName" value="" />
    </div>
    <div class="element">
      <label>Line 3: </label>
      <input class="text" type="text" name="studentName" value="" />
    </div>

    <div class="element">
      <label></label>
      <input type="submit" id="submit" value="Post Assessment" />
    </div>



  </form>
</div>

I'm trying to get the submit button to float right within the div but setting that attribute seems to cause it to break. How can I get a parent element to wrap a floated element?

Answer 1

I figured it out. The parent div should have overflow: hidden;. That will make it contain any floated elements in it.