Float left causing page wrapper to collapse

Question

Hi I'm quite new to HTML/CSS and I'm creating a simple web page. I'm learning a bit about positioning and floats.

In my page I have 3 divs. the first div has a class=".page" which is wrap around the other 2 divs .welcome and .blog. I want to place the .welcome div to right and the .blog div to the left. So I decided to use float left and float right.

My problem is when .blog floats to the left the .page div doesn't wrap around them anymore and I don't know why. I have colored the div.

• .page div is colored grey
• .blog was blue but when floated left it loses its color
• .welcome is colored green to the right

https://jsfiddle.net/jnm4z5c1/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
  background:red;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Main style */

.page {
  margin: 36px auto;
  width: 90%;
  background: gray;
}
.welcome {
  float: right;
  margin: 0 auto 53px;
  background: green;
  width: 40.875%;
}
.blog {
  clear: left;
  float: left;
  margin: 0 0 20px;
  width: 49.375%;
}
.main {
  width: 62.88%;
}
.other {
  width: 36.777%;
}
.lede {
  font-size: 1.5em;
}
.lede a {
  font-size: 0.45833333em;
}

<div class="site">

  <div class="page">
    
    <h1 class="lede"> Hello <a href="#">World</a>  </h1>

    <div class="welcome">

      <p>&#8220;Let&#8217;s go to town,&#8221; I said.</p>

      <p>They looked at me admiringly. With three hundred almost indestructible androids on the loose I was the big brave hero. I grinned at them and hoped they couldn&#8217;t see the sweat on my face. Then I walked over to the Copter and climbed in.</p>

      <p>&#8220;Coming?&#8221; I asked.</p>

      <p>Jack was pale under his freckles but Chief Dalton grinned back at me. &#8220;We&#8217;ll be right behind you, Morrison,&#8221; he said.</p>

      <p>Behind me! So they could pick up the pieces. I gave them a cocky smile and switched on the engine, full speed.</p>

      <p>Carron City is about a mile from the plant. It has about fifty thous

    </div>
    
    <div class="blog section">

      <div class="main">

        <p>&#8220;Let&#8217;s go to town,&#8221; I said.</p>

        <p>They looked at me admiringly. With three hundred almost indestructible androids on the loose I was the big brave hero. I grinned at them and hoped they couldn&#8217;t see the sweat on my face. Then I walked over to the Copter and climbed in.</p>

        <p>&#8220;Coming?&#8221; I asked.</p>

        <p>Jack was pale under his freckles but Chief Dalton grinned back at me. &#8220;We&#8217;ll be right behind you, Morrison,&#8221; he said.</p>

        <p>Behind me! So they could pick up the pieces. I gave them a cocky smile and switched on the engine, full speed.</p>

        <p>Carron City is about a mile from the plant. It has about fifty thousand inhabitants. At that moment, though, there wasn&#8217;t a soul in the streets. I heard people calling to each other inside their houses, but I didn&#8217;t see anyone, human
          or android. I circled in for a landing, the Police Copter hovering maybe a quarter of a mile back of me. Then, as the wheels touched, half a dozen androids came around the corner. They saw me and stopped, a couple of them backing off the way
          they had come. But the biggest of them turned and gave them some order that froze them in their tracks, and then he himself wheeled down toward me.</p>

      </div>
      <!-- End .main -->

      <div class="other">
      </div>
      <!-- End .other -->

    </div>
    <!-- End .blog .section -->
    
  </div>
  
</div>

Answer 1

When you set float on an element it will be out of the normal content flow, that causes the container to collapse on height. In your example, it equals to the height of the h1 tag, since it's the only child that not set to float, otherwise it will collapses to zero height.

You need to clear the floats to bring the normal layout back, there are a number of ways, here are the most popular ones:

.page {
  overflow: hidden;
}

or:

.page {
  overflow: auto;
}

or:

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

jsFiddle

Answer 2

There are many ways, but the most recommended way is:

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

JsFiddle

Answer 3

Floated elements doesn't effect the height of non-floated parents. You need to float the parent elements too.

.page{
    margin: 36px 5%;
    width:90%;
    background:gray;
    float:left;
}

Updated Fiddle