Fix problems with div tags when you float left in Dreamweaver aka clearing the float.

Hi there, this video is here to save the day. Now you've got a website where you've used Float, and it's applied to something and now the object underneath is trying to sneak underneath it, and generally just behave badly. So we're going to fix this using something called 'Clearing the Float'. And it will magically push the H1 down, like this. Awesome! Let's go and learn how to do that now in Dreamweaver.

So first thing is, let's put in that offending H1. I'm going to click on my p-tag here. I really like to click these Tag Selectors down the bottom here, so it grabs the beginning and ending. I find it's always easy when you start inserting stuff using the design kind of Live view. So, 'Insert' panel, let's go to 'Heading : H1'. Click on it again. And I want it just afterwards, please. You can see, this is the problem. The H1 really wants to sneak up underneath these two elements that we've put in there. The reason is, because we floated these two guys. The way I think of it, is the Float-- think of Float, pulling it kind of off the page, towards us. And the H1 kind of sneaks in underneath because it's not aware of those guys anymore because they've been floated.

To fix it, we do something called 'Clearing the Float'. It just means, "I want you to look up, and there's some guys floating above you." "I don't want you to ignore them like you currently are." Great example? No. I couldn't think of a better way of explaining it. So let's add a Class to this H1 to say "Hey, there's some Float going on, and be normal." So first thing is, let's make the Class. So let's go to 'CSS Designer'. 'styles.cc', nothing's working, go to 'All'. 'styles.css', 'Global'. And we're going to create a 'Selector'. Call it anything you like, we're going to call ours 'clearfloat'. And its main job is clearing the Float on both of these. So now we need to apply it to our H1. We go in here, '.clearfloat'. Awesome! So, whenever you have Float just underneath it, you need to clear the Float.

Now this is a re-usable Tag, we can use this over and over again. Now, if I put something underneath the H1, I don't need to clear the Float. This is kind of like a one-hit. So whenever there's a Clear Float just underneath it, we need to clear it. And then we don't need to do it again until we start floating again. You'll know when you need to do it because things start acting weird like our H1 did. Let's get on to some other details.

The next thing is, we're going to put this text in here and we'll Style it. I like putting the text, for some reason, in Code view, better. You'll also notice that we're using ampersand '&' here. Ampersand in code, normally is fine. You can see, it's displaying fine, but some older browsers it's not going to have a good day. And you can see that, Dreamweaver, if I type it in there, it's saying, like it's red, bad. So the code version of ampersand, the & symbol is actually '&amp'. So 'amp', and then a semicolon ';'. I know it's weird. But in Live view, you still get your ampersand but it's not going to break anybody's web browser. But if you've got a website, and you're putting in lots and lots of text, I've done it before, and I've never run into any trouble. But that's why it was red, anyway.

One of the things I want to do though is here in Illustrator, I've broken it into three lines. Now I've got two ways of doing this. The good way, and the bad way. The bad way is, if I go to there, what did I break into? I broke across Kiwi. So if I go to there, 'double click', I'm going to hit 'return'. The difference in the other one is designer based. I'm going to put 'return' here. Where are you? Over there. So that works, but you can kind of see here, in my Code actually I have now three H1s. And that's not a good plan because I'm now going to have to go and Style these all separately which is not a big deal. But also, when it comes to Search Engines it sees-- so say Google Search Engine comes to me and says "Hey, there's a title called 'I'm a Kiwi'". And it says, you are a UX designer. They see them as separate blocks. So it's nice and easy to put in, instead of return—

I'm going to undo to get all these together. Go back into here. And, just in front of the UI, I'm going to hold down 'Shift' and hit 'return' on my keyboard. And what you'll see is-- I'll do it there. I'll do it there. Now I click down here, and you see, you get these Break 'br' characters. I'll show you them for a couple of reasons. It's that you will copy and paste things from bits and pieces, and you'll be like, "What the hell is a 'br'?" And it's just like a-- if you're a Graphic Designer, it's a 'Shift return', or a 'soft return', or-- they call them all sorts of different things. In webland, it's called 'br' or a 'break'. And it just means it's still red, as one complete H1. Just with a couple of line breaks in there. The next thing I'm going to do is I want to Style this H1 here. So I'm going to go to 'Styles', 'Global', 'Selector'. And I'm just going to type in 'H1'. Remember, pre-existing Tags that we didn't write, like the H1 and the Image tag, or the br don't have full stops '.' in front of them when you are styling them.

So, H1, I would like to do a couple of things. Probably this one, it's going to be, the color is going to be white. Always white. And what I'd also like to do is update the Font now. Actually let's do the sides first, because that's a nice, easy one. And then we'll look at some of the issues when it comes to-- I think it's about 80. It keeps putting in double digits. So, grab the right size, I want to use this Font here. And it's something called Playfair. So I'm going to go and use that. Now, I can go through-- we've done this earlier in the course remember, we went up to 'Type', 'Font Family' and we went to 'Manage Fonts', and we did that. Now, that won't work in this case because it has to deal with so much of the Head Tag, remember, up here it needs to add all this stuff in here, where it says, where's the Web Edge Fonts? So that means, we have to edit this stuff. So we're going to close down our Index page, and open up the Template. 'Save?', say 'Yes', and I'm going to open up my Template and do it in here.

There are just a few things that's going to happen throughout your Web Build, now that you've got a Template. You don't have to go back to the Template, so do it, and if you run into trouble, and you're like, "Hmm!" Maybe if I do it on the Template, go back to the Template, try it in there, you might find the fixes for the problem that you've got. So, Template, I'm going to insert, actually CC Libraries. No, I'm going to head to CSS Designer panel. And do I have an H1, I don't yet, so I'm going to-- I do have an H1, there he is there, I lied. And 'Type', we just made him. 'Font Family', let's go to 'Manage Fonts'. This one here is called Playfair. Playfair Display. I'm going to tick him on, click 'Done'. Remember, nothing really happens. Then I'm going to go off, and click on 'Playfair'. Awesome! It adds a few properties for you, to make it work. It's coming up here, it's added those, go away. Then hit 'Save All'.

It's going to update. 'Index', 'Update please', 'Yes, please'. You may change the Code. "Mark it as non-editable?" You say, "Yes". Click 'Close'. Close down our Template, and hopefully now when we open up our Index, hey ho, it's our Playfair. So, remember, if something is not working you might have to go and do it in the Template. The reason I know that particular problem is because when I was designing this course I tried to do it here in my Index page, and it didn't work. So I jumped back into the Template, and it did.

The last thing I'll do before we go, I'm just going to play around with these Line Spacing. It shouldn't worry me, but there is a big gap in between these. Remember, earlier we put in - if I click on here - we put in Break characters. So it's Line Spacing that's going to work in this case. If there were separate H1s, I'll have to use the Margin between those H1s. So I'm going to go to my-- we're going to kind of use the Current thing now because I want to kind of, I guess, get you to use that, because as you get better this is going to become more and more useful from Dreamweaver. I've got this selected here, and if I click on 'Current' down here, it cuts it down to the computed ones. Just means that everything that is affecting what you've got selected is available, so it cuts down, unless it's quite a bit, or after a while, you end up with a really—

I've got websites, and just this Selectors list, it's generally enormous. So, Current becomes super useful. You're like, actually click on this, and it just gives you stuff that's applying to it. In my case, clearfix is applying, it's not the one I want. H1's applying. Awesome! And what I want to do is go down to 'Type', and I want to play around with 'line-height'. And I'm going to use 'pixels'. '0 pixels', and I'm just going to click, hold, and drag. Just one of the nice things about Dreamweaver is that instead of having to type it every time, you can click and drag stuff. Kind of, little bit more of a designer in here. Yes, now I'm happy with that. All right, 'Save All'.

And that will be it for this video, it's a pretty epically long one. Let's get on to building the rest of this page. See you in the next video.