Reputation: 2721

Float CSS attribute causing parent div not to inherit height?

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?

Upvotes: 6

Answers (8)

Naeem Akhtar

Reputation: 1164

For situations like this .clearfix was used. Have used same in this one.

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;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.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 clearfix" 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>

Upvotes: 0

Kamillekaz

Reputation: 11

MDN on this case says this:

Note: If an element contains only floated elements, its height collapses to nothing. If you want it to always be able to resize, so that it contains floating elements inside it, set the value of the element's display property to flow-root.
#container {
  display: flow-root;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

On the overflow method they say the following:

The problem with using overflow to create a new BFC is that the overflow property is meant for telling the browser how you wish to deal with overflowing content. There are some occasions in which you will find you get unwanted scrollbars or clipped shadows when you use this property purely to create a BFC. In addition, it is potentially not very readable for a future developer, as it may not be obvious why you used overflow for this purpose. If you do this, it would be a good idea to comment the code to explain.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts

So I would prefer the display: flow-root method.

Upvotes: 1

Zeeno

Reputation: 2721

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

Upvotes: 7

Arun Krishnan

Reputation: 1958

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

Upvotes: 0