Floats & Padding

[00:00:00]
>> Jen Kramer: Okay, so, so far today we've talked a lot about the box model. I encourage you to take a look at our web page, encourage you to take a look at the website for the course. The frontendmasters.github.io/bootcamp. Make sure you take a look at that, look at the layout page.

[00:00:24]
There's more information in there than I've told you in class today just to try to streamline our information. Be sure you read through all of that stuff. Make sure you're asking questions online. We started with the box model. We looked at borders, padding, margin, width and height, looked at a whole lot of different ways of doing that.

[00:00:42]
We've made our nav bars, gone a couple of directions, vertical and horizontal. We talked about display block, inline, and inline block. And now we're on to our next topic for today, which is floats and clears. This is probably one of the areas where beginners get really, really tripped up is with floats and clears.

[00:01:05]
Fortunately, we're not using floats the way we used to use them. We used to use floats for laying out whole web pages and you will still see that done all over the Internet. But fortunately as of 2018, we have some great new tools for laying out web pages, including flex box and grids.

[00:01:23]
We'll talk more about flex box in our next unit. And grid is available, it's out there online. You can read about it, but for right now we're gonna talk about floats and images because this is where floats were always intended to be used in the context of images and web pages.

[00:01:40]
So a lot of you ran into this yesterday while you were working with your book chapters, you wanted to put a picture in place. And you wanted the text to wrap around it really nicely like it was a magazine, or a newspaper where you had an image with text wrapping around it.

[00:01:56]
And that is what floats and clears are all about. So if you go on ahead into your notes, there's a code pen here for you. Go ahead and open up that code pen. This is exploring floats and clears, and just for fun, we're now using place Cage. We've been using place kitten.

[00:02:15]
This is Nicolas Cage, all right? We have sane Nicolas Cage and crazy Nicolas Cage here on our page. And these are two images inside of a bunch of text. So we have some very simple HTML going on here, if we look at that. Notice that I've used my article tag here, this is a whole article about Nicolas Cage.

[00:02:38]
Although it's in Latin, [LAUGH] says My Wonderful Article is our H1. Then we have a paragraph, we put an image inside of there and then we talk about some stuff. And then over here on the side, I have another tag that I'm introducing for you here. This is the aside tag.

[00:02:57]
In the aside tag we have a block quote. Remember block quote from yesterday. Here's a quote from a Nicolas Cage movie, I'll be taking these Huggies and whatever cash you got. Okay, he said this in the raising Arizona movie. What is the aside tag indicate? Anybody have any idea what the aside tag is for?

[00:03:18]
What does it sound like, an aside tag?
>> [CROSSTALK]
>> Jen Kramer: Okay, wait a minute, one at a time, Mohammed go ahead.
>> Speaker 2: Put it to the side.
>> Jen Kramer: Put it to the side, that’s possible. Dave?
>> Speaker 2: Put something next to something else?
>> Jen Kramer: Maybe put something next to something else?

[00:03:33]
Possibly? Although, all of that implies the way something looks. Remember that the aside tag is going to refer to what are we trying to convey. And what we're trying to convey here is that, here's a little bit of information that's extra about this webpage. It's not to critical to the article, if we were to take this out.

[00:03:52]
You could still read this article and enjoy it. But this is additional information that might help you appreciate the article a little bit more, right? So that's what the aside tag is all about. Frequently aside tags do in fact appear as columns on webpages. But we've gone ahead and put it in here this way.

[00:04:09]
And then we go on down here we have a final paragraph and I put an image at the end of this paragraph down here from the place cage website. So our first trick of the day. For this first image, what we wanna do is we wanna get this text.

[00:04:24]
Notice that the text starts at the bottom of the image. So the image is right here, it's in the paragraph, and the text starts right next to that. So what does that tell you about images? Are they block level or are they in line? How many say they're block level?

[00:04:42]
How many say they're inline? Right on, the inlines have it. Why is it inline?
>> Jen Kramer: Yeah, Cassie.
>> Speaker 3: It's on the same line as the paragraphs.
>> Jen Kramer: It's on the same line as the paragraphs. It's as wide as its content, a picture is as big as a picture, right?

[00:04:58]
Yeah?
>> Speaker 3: Can't you make it a block element?.
>> Jen Kramer: We could make it a block element? Absolutely, we could use our trick that we've used in the previous lesson. Where we could say display block and we can make our images take up a larger amount of space. But generally speaking, images by default are inline elements.

[00:05:21]
And this is inside of our paragraph. Images also, of course, have some properties define that go with it, right? They have a width property and they have a height, yeah? Cuz that's how big the images, it's that big, right? So it's got a width and height defined for it.

[00:05:38]
So here in our HTML, let's take a look at our code for our first image. All right, so if I wanna style just this one image here, not the other one, how am I gonna go about doing that based on what you know now?
>> Speaker 3: Add a class.

[00:05:53]
>> Jen Kramer: We need to have a class, okay? So I'm gonna call this class floatleft. That's a class name you're gonna encounter in a lot of webpages actually. Floatleft, okay? So I'm gonna make a class called floatleft. We're gonna put it in our HTML as well, class equals floatleft, okay?

[00:06:19]
So far nothing's happened. And we're gonna add a property in here, okay? Anyone wanna guess what we might put in our floatleft property to make our image go to the left side of the page? Cassie?
>> Speaker 3: Float.
>> Jen Kramer: Float. What?
>> Speaker 3: Left.
>> Jen Kramer: How about left? Great. Hey, look, it worked.

[00:06:43]
[LAUGH] Okay, floatleft. So that's pretty much it. All we have to do is say float left and take a look at that our text is now next to that image. See how that is, okay? Also look at our other image. That's probably not where we want that other image, is it?

[00:07:04]
Okay, let's not worry about that other image at the moment. So what should we call this one cool looking Nicolas Cage. Cool looking Nicolas Cage is right here. He's floated to the left. We have all of our texts smooshed up against the side here. If our window was a little bit smaller, I'll just crunch down my browser window here.

[00:07:30]
You'd see that the text would eventually wrap around the bottom of the image, see that? Okay, so depending on the width of your page or the width of your article and so forth will depend on the behavior of you text around that particular image. Makes sense? Okay, are people happy with the way that looks?

[00:07:52]
No? What would you like to have? Describe how that might look better. Jana?
>> Speaker 3: I personally did float right and then there's a space between the right. The paragraph writing and the picture just done for you, otherwise, in this example, I would wanna put,
>> Speaker 3: Padding on the paragraph.

[00:08:18]
>> Jen Kramer: We need to put something to get some space in between the picture and the text, right? Smashing text right up against the picture is kind of a fashion. No, we don't wanna do that. Okay, how could we figure this out?
>> Speaker 3: Try this.
>> Jen Kramer: Here's how you figure this out, okay?

[00:08:37]
Right here, I'm just gonna do this right in the same class for the moment. I'm gonna put on a border.
>> Jen Kramer: Okay, we're gonna put a border on my image, all right? Now that you know where the border is, now you can take a guess. So if I say padding one rim, see where the padding goes?.

[00:09:03]
Is that what we want? No, so if I switch it to margin, [SOUND] is that better? Yeah, so now you can just turn off your border here.