Float and flow-root

by kmouse

HTML

<div id="wrapper">
  <section>
    <div class="float" style="margin-left: 0px;">Try to resize this outer float</div>
    <div class="box">
      <p>Normal <!--span class="float" style="float:right">Try to resize this inner float</span-->text</p>
    </div>
  </section>
  <section>
    <div class="float">Try to resize this outer float</div>
    <div class="box flow-root">
      <p><code>display: flow-root</code></p>
    </div>
  </section>
</div>

CSS

#wrapper {
  width: 500px;
  border: 5px solid #eee;
  overflow: auto;
  resize: both;
	position: relative;
	background-color: #eee;
	border: 8px solid #ccc;
	padding: 15px;
}
section {
  display: block;
  min-height: 150px;
  /*white-space: nowrap;*/
}
.box {
  background-color: #e0cef7;
  border: 5px solid #663399;
  /*white-space: nowrap;*/
}
p {
  white-space: normal;
	/*white-space: nowrap;*/
	/*text-align: right;*/
	border: 2px solid #fff;
}
.box.flow-root {
  display: flow-root;
  background-color: #f0f8ff;
  border: 5px solid #4682b4;
}
.float {
  float: left;
  overflow: hidden;
  resize: both;
  margin-right: 25px;
  width: 200px;
  height: 100px;
  background-color: #fffa;
  border: 1px solid black;
  padding: 10px;
}