So what we need to do next is open up or

clear the collapsed space around our floated columns.

We want the float container to stretch up and accommodate the floats.

And there are a few ways we can do that.

Now one of the ways we can prevent an element from collapsing from floats is

applying an overflow property and setting the value to hidden or auto.

So let's go back to our style sheet, and

let's target the secondary content container under main styles.

And we're gonna add an overflow property.

And let's set the value to auto.

So now when we save our style sheet and refresh the page,

notice how with overflow auto, the browser is able to account for

the height of the floated columns and the div is no longer collapsed.

And we know it's not collapsed because now the second border is now at

the bottom where it's supposed to be.

So, this is a simple and effective way of clearing floats.

But it isn't the most recommended solution because the overflow property may

cause scroll bars to appear in certain browsers, or certain parts of

the content area may get cut off, depending on the overflow value we set.

But it's actually good enough to help us out in a pinch, or for

use on smaller projects with simple layouts.

In fact, it's totally fine to use this method in our layout.

But we're going to go ahead and use one of the best and most reliable methods for

clearing floats.

It's called the clearfix.

So let's go ahead and remove the overflow auto from our secondary-content rule,

which, as you can see, once again collapses our parent column.

So now let's go back to our style sheet, and, at the bottom of our style sheet,

beneath our floated column rules, you should see the new comment section,

labeled Float Clearfix.

Now, this may contain some CSS you might not be familiar with yet.

But don't worry, all you really need to know are two key parts.

So with this method, any time we need a containing element cleared,

we simply need to give that element the class group.

So since the div with the class secondary-content here on

line 29 is the parent element of our two floated columns,

we'll need to give this div the class group, so right after the t-border class,

I'm going to add a space, then write the class name group.

So now let's save our index.html file, and when we go back to the browser and

hit refresh, notice how it forces the secondary content div to contain our

columns without collapsing, so everything looks great.

And you can use any class name you want for this clearfix.

Now group is a common name, since we're using it to contain or

group the elements within the parent.

So, what this clearfix does is, it generates a blank

pseudo-element after the content of our div, with the class group.

So we're actually able to generate content from our CSS.

And we'll learn more about that in a later course.

But the key to this clear fix is this clear both declaration.

The value, both,

clears any collapsed space created by floats on both sides of the container.

So, now what's handy about floats is that we're able to sort of

change the order of our columns, without having to change anything in our HTML.

So, if for some reason we need to reverse the order of our two columns, for

instance, let's change the tips float to left, and

the resorts float to right.

When we take a look at our layout once again,

and refresh, notice how the order of our columns is now reversed.

Again, check out our CSS layout techniques course.

In that course, we go more in depth with float layout and

we cover all the benefits of each layout method.