Float Image Right & Clear

[00:00:00]
>> Jen Kramer: But we have some of the other things that have happened here. Take a look at this. So, let me just make this a smidge wider.
>> Jen Kramer: Make it 30 rems, there we go. So we've got all our text wrapping around our image so nicely. You can see we have our space, yeah.

[00:00:19]
We have some space here underneath. Then we've got this weird image here.
>> Jen Kramer: Can you guys write a class for this image here to float this over to the right?
>> Jen Kramer: Try to do that right now, take two minutes, see if you can float the image over here, crazy Nicholas Cage.

[00:00:44]
See if you can write a class that will float it over to the right. Okay, so did you guys get it? Did you guys get it? Floating right?
>> Speaker 2: My crazy Nicolas Cage popped out of my article.
>> Jen Kramer: We have a problem, don't we?
>> Speaker 2: He's.
>> Speaker 3: Goes crazy.

[00:01:00]
>> Jen Kramer: Okay, so tell me what happened here with crazy Nicolas Cage, what did you do?
>> Speaker 2: I created class.floatright.
>> Jen Kramer: Okay, floatright, that's a great name.
>> [LAUGH]
>> Jen Kramer: Okay, and what did you put in here?
>> Speaker 2: Float right.
>> Jen Kramer: [LAUGH] Fabulous. And then here on your image, you put in your class, right?

[00:01:21]
Class=floatright. And what happened? Crazy Nicolas Cage is hanging on by a thread, isn't he? Dear. So this is a problem that happens with floats. Because of the way floats happen to work, we have actually pulled the float out of the normal flow of the webpage. One thing after another, and we make it its own thing, it's floated in space.

[00:01:51]
It's floating around there, the space that it previously occupied. Do you remember before we had this in place? That crazy Nicolas Cage was just here, we had this gaping, we had this sentence that was going here, and then we had this gaping hole before we finished our sentence, right?

[00:02:11]
And now that gaping hole in our sentence is gone, but Nicholas is hanging out of the article, here on the side. So this is part of the problem with floats, is that they're gonna do this kind of thing on occasion, and if you want that red line to continue all the way around Nicolas Cage there at the bottom, we have to do something called a clear.

[00:02:33]
If you float, you must clear, if you float, you must clear, if you float, you must clear. Have you tattooed it on your forehead yet? If you float, you must clear. I say this many times because my students tell me they hear me in their head saying to them, I floated, I have to clear.

[00:02:51]
So Jen just said, all right. So, this is the number one problem that people encounter when they're doing layouts and something crazy happens, and you have no idea. If that happens to you, it's probably that you have a float that hasn't been cleared. And there's a bunch of ways that we can go about doing this.

[00:03:11]
So I'll show you a couple of these methods. Here in our float notes, there are some clear properties that you can use, the actual clear property itself, and that will help. This is another methodology that's right here. And this is the methodology we're gonna use in this particular situation.

[00:03:34]
So, if you scroll on down here, this is about, a little less than three quarters of the way down the page. There's this paragraph here, it says, there's other methods to clear as well, a popular one is to self clear the parent using this formula. And you'll see this little formula up here on the top.

[00:03:53]
Go ahead and copy that little formula. And we're gonna paste that on into our web page. And we're gonna change the selector. We don't have a class called group, but we do have an article, that article. That we can make use of this.
>> Jen Kramer: I don't know why that's commented out.

[00:04:21]
Take out the two slashes in front of clear: both, that shouldn't be there, that's an error on our part. So the parent, remember, the parent of this paragraph that contains our image is the article, correct? So what we're doing is, we're putting this clear formula on our article.

[00:04:39]
And this is the formula here that will clear our float, and you see here, very nicely, that our red border now goes all the way around our image and the text itself.
>> Jen Kramer: The thing that you see up here on the top, this after, this is called a pseudo element, and it's shockingly the little bit of space after the article.

[00:05:05]
Guess what, there's also one called before.
>> Jen Kramer: These are little formulas you can look up online for clearing your images. How are you doing?
>> Jen Kramer: Yes?
>> Speaker 3: Both refer to.
>> Jen Kramer: Clear both, we're quite clear to the left and clear to the right. And so that, any floats that are out there have now been totally cleared.

[00:05:33]
>> Jen Kramer: This is what we would call an incantation in programming. This is a little formula that somebody's come up with, that have determined that this is the best way to make something clear on a parent. We just copy it and paste it in, and that's what we wanna do.

[00:05:48]
>> Speaker 3: This specifically would go in to anything, or whenever you float something?
>> Jen Kramer: If you float something, this should go on the parent.
>> Speaker 3: Exactly as it is? Adding empty content and displaying it as a table?
>> Jen Kramer: Correct.
>> Speaker 3: Okay.
>> Jen Kramer: Yeah, that exact thing. Yes.
>> Speaker 3: Where should this article after go in your CSS?

[00:06:10]
>> Jen Kramer: It could go pretty much anywhere you wanna put it. I have it here after the floats. It could be after the article if you wanted to keep things neater. My CSS is kinda messy here because I've just been typing away. So, probably to keep things neat we would wanna put our float left and float right, we'd probably wanna put those together.

[00:06:32]
We probably wanna put article and article after together, just to make our code a little easier to read, and make things a little easier to find. That's a great question.
>> Speaker 3: Is there ever a situation where you wouldn't want to clear something?
>> Jen Kramer: Well, if you like that look of Nicolas Cage hanging on for dear life, and he is crazy Nicolas Cage, then that would be cool, you could do that.

[00:06:55]
But chances are, you actually want it to look this way. So clearing your floats is probably good to do.
>> Speaker 3: I hate the idea that, yeah, in order to make this work, you have to add some code that you'll always add, but it isn't just in there by default.

[00:07:09]
>> Jen Kramer: It's not in there by default.