All right, let's take a look at floating elements, so what I'm going to do here is I'm going to get
a comment out this box and I'm going to keep my external stylesheet linked to my page.
I'm going to write code in style nauseousness, but I'm not going to delete this.
I want to keep this because maybe I want to use it some other time, but I'm going to leave or make
some extra space to work here.
And what I want to do is demonstrate floating elements.
And so a floating element is very this is very interesting.
So we can have a paragraph and we can put Lorem in here and we could copy this paragraph over and over
and over again.
Let's go ahead and copy this over and over and over.
Actually, nope, that was wrong.
Let's back that up.
Let's add a line break, let's do this.
This way, doo doo doo doo doo doo doo doo doo, we're going to have a lot of text in here.
And let's refresh our page and so you can see that style nauseousness is still working for us, that's
you.
Let's go ahead and comment that because that's going to be counterintuitive to this lesson.
There we go, and so we have all this text in here and now the idea of floating is when you have an
image, you can put an image somewhere in here and you can either make it float to left or float to
the right.
And that's going to make your text wrap around everything.
So let's go ahead and add an image and I'll show you what a normal image looks like inside of a big
paragraph like this.
We could do, let's say, the bar here, we could say IMG SIRC is equal to Chewey JPEG and let's give
it a width of two hundred pixels or two hundred pixels and the height is going to be automatically inherited.
So whatever the aspect ratio is for a width of two hundred, it's going to have the proper height.
And that didn't work because I spent Chewey wrong.
OK, so we've got this image over here and like it's close, but it doesn't really look like a like
a news website or or like a newspaper would do it.
We actually want the text to wrap around here.
So what we can do is we can say.
Style is equal to float and then we can say float, right, and what this is going to do is boom, move
that image all the way to the right and have text flow around it, which is really, really nice.
We can also say float left.
And it does the exact same thing now.
We can also add some margin around here margin.
Ten pixels, just so that we have some spacing around there, we could do.
One pixel, solid black, and I'm doing internal access here.
And then I could say, give this a box, shadow X-axis zero, Y-axis zero.
Let's make it blurr by five pixels and make this black.
And now we have some sort of image that actually sticks out now, this is all internal series and this
is probably the most frowned way of writing scissors, something to grab that cut.
Delete it and I'm going to give this a class of floating image, and then if I go over to style access,
I can select that image with image dot.
Floating image, alternatively, this would work as well.
And I can just paste that in there and so new line.
New line over their new line.
And if I did that right, and I refresh this, nothing should change, beautiful, and if I want to
change that flow, I could change that to write.
Just like that.
So that's how we sort of make images and content float side by side.
Now, what do you think is going to happen if I have two images floating side by side like this?
Let's take a look.
They float side by side, they literally try to get as close to each other as possible.
Now there's a little bit of text in here, and so it's going to offset things as well, which is very,
very interesting.
So you might not get the exact outcome that you're looking for, but it can be very, very close.
Now, the nice thing about this floating image is going to be floating to the right.
We can overwrite this with internal access.
And this is a good case for internal scissors.
We can say float left.
There we go, that looks a little bit better.
Now, I really want you to give this a shot, you're going to be using float's quite a bit until you
get into significantly more advanced access, floats are very, very important at this point in time
in your development career or your development path.
So make sure you are somewhat familiar with them.
What you can do as another sort of fun example or something to play with is you can do.
An ordered list or an unordered list, an ally, and you can put them all side by side or you can have.
Divorc float, and you can put these all side-by-side and make them float side by side.
Go ahead, give that a shot.
Don't feel like you need to master this one, but give it a shot, have some fun with it and just sort
of get some hands on experience with how this one works.
It's a little bit weird to get a hang of at first, but it's really good to tinker around with it and
just, you know, experiment.