The float method

We can prevent elements from collapsing by floating the container to the left or to the right. Let's do this; let's add float: left or float: right to our secondary-section. Either will work:

.secondary-section { 
  margin-bottom: 50px; 
  background-color: #7EEEAF; 
  float: left; 
} 

Once we save this, we will see that we have the green background, so the collapse is no longer taking place, but the obvious problem is we've floated to the left. We wanted this div to be centered:

This method has an obvious drawback. There are some circumstances and some situations where it would be a perfect solution, but in this one, there's an obvious ...

Get Mastering CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.