body {
  /* This is the footer's background color */
  background-color: #888;

  /* Normally, your normalization stylesheet should take care of the below part but it's added here for extra clarity. */
  margin: 0;
  padding: 0;
}

.mainContent {
  background-color: #fff;

  /* overflow:hidden will not hide anything, as .mainContent doesn't specify any dimensions. It's just a trick to ensure that the contained children's margins doesn't push outside the .mainContent element. */
  overflow: hidden;
}