Parent Height doesn't follow their float children [duplicate]

Answer 1

You need to clear your floating elements, use overflow: hidden; for #mainContainer

Demo

Alternate : (You can add clear: both; to clear floats)

Demo

Or you can also self clear floating elements (Only if you wish to support IE9=+

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

Why this happens?