Knowing how to position elements on a page to build layouts is just as

important as understanding the box model components.

So here, we're gonna learn some of the basics of float positioning.

Now floats are one of the most commonly used methods for

laying out a page with CSS.

When an element is floated the element is taken out of the normal flow of

the page and placed along the left or right side of its container.

Depending on the float value we set and

that causes other elements to wrap around it.

So back in our index.html file.

The secondary content div on line 29 contains two nested divs and

each of them contain an image, an h3 element, a paragraph, and a list.

Now currently if we take a look at our layout,

we'll see how the two divs appear stacked.

So what we're gonna do is display the two divs as columns.

So they're gonna be laid out side by side in one row and

we're gonna do that using floats.

So first let's go back to our HTML file and give each of the two divs a class.

So, we're gonna scroll down to the div on line 30 and

let's give this div a class of resorts.

Next, let's scroll down to line 43,

and we're gonna give the second div the class, tips.

All right, so let's save our index.html file and

let's go back over to our style sheet.

And what we're going to do first is add a new comment section at the bottom of

our page that indicates where we're writing our float.

So let's copy Layout Styles content here, online 109.

And let's scroll down here right below the arrow rule.

I'm going to paste that comment and

I'm going to change the comment to read floated columns.

And don't worry about this section here just yet

we're gonna get to that in just a bit.

So what we're gonna do first is target both the resorts and

tips columns and give them a width.

So right under the floated columns comment let's first target the resorts class.

And I'll add a comma and we're also gonna target the tips class.

And let's give these columns a width.

And we're gonna make the width value, 46.5%.

So now we save our stylesheet, and refresh the the page,

we can see how each of the two divs takes up 46% of the parent container.

So now we're ready to lay them out side by side by floating them.

So, as I mentioned earlier, floats remove elements from the normal flow of the page.

And as we saw earlier, in the normal flow of our page, the divs are stacked on

top of each other vertically, since they are block level elements.

So if we go back to our stylesheet and right below the resorts and tips rule.

If we target the tips column.

Then we give it a float property.

And we make the float value the keyword, right.

When we save our style sheet and refresh the page, notice how

the div positions itself, or floats, over to the right side of its container.

And we can actually tell that it's taken out of the normal flow of the page,

since it's overlapping the footer content.

And we'll fix that in just a bit.

Now since the resorts div here above is still in the normal flow of the page,

it's taking up an entire line of content.

And if we bring up the Chrome Dev tools and inspect the div.

We can see how the remaining margin area of the resorts div is what's taking up

the rest of the line.

So, now, if we go back to our style sheet, and target that resorts column.

Then give it a float property, and this time, we're gonna float it left.

Now when we save our style sheet and refresh the page.

We can see how the resort div on the left is now taken out of

the normal page flow and placed along the left side of its container.

So now both columns are positioned on the same line.

So now we're seeing a common issue that happens when using floats.

Now if a block element contains floated children, it's height will collapse.

So here, we can see how the secondary content divs height has collapsed.

It doesn't expand to completely surround the floated columns

because the browser does not account for the height of the floated columns.

Remember, they're no longer positioned in the normal flow of the page.

And on top of that,

the content of the footer is starting to wrap around our columns.

So we need to fix this.

[BLANK_AUDIO]