Create Websites with Dreamweaver

Lesson 15 of 26

Understanding Floats and Clearing

 

Create Websites with Dreamweaver

Lesson 15 of 26

Understanding Floats and Clearing

 

Lesson Info

Understanding Floats and Clearing

- [Melissa] We added 15 pixels of padding on h1s, h2s, and paragraphs. And we can see that happening in there, but you'll notice that there's a little bit of text at the top in the nav, and there's a little bit of text in the header section that it's not doing that because it's not in the paragraph. So that's why that's not happening in the footer as well. So that text has not been formatted and that's okay because we're going to take care of all that stuff now. So I'm going to jump back into Dreamweaver. The first thing I want to do actually is I want to talk about floating and clearing. So that aside, the area that says this is a header, that's supposed to be on the left side. So we want it to be on the left side. So we need to create some CSS to make that happen, and I'm going to go ahead and I'm going to do that in my aside. So in my CSS Designer, I'm going to click on aside to select it. I have my properties on the right. Inside of my properties, I'm going to set the width, this i...

s a responsive page. I'm going to use a percentage. I'm going to set my width to 40%. So I click on % and I'm going to type in 40. Yes, %. So I've got 40%, and I can see now it is actually 40%. So if the left is 40%, I want the main part to be 60%, and I actually don't have any CSS for the main. So under Selectors, I'm going to click New Selector. It's trying to help me. That's great. I don't need the container. I just need the main part. I'm going to take that main and say width should be 60%. Okay, great. Definitely not what we wanted it to look like. I'm going to close up this Properties panel so we have a little more room. That's not what I want it to look like. I want the left to be on the left and I want the main to be on the right. So what I'm going to do is I'm going to use this thing called float left, and I'm going to do that on the aside. I've got the aside selector inside of my Properties panel. I'm going to come down towards the bottom of the layout section, and I have these things called floats. And it's giving you like a little icon to try and help you out: float left, float right, none. I want to float left. So I'm going to click on float left. And my text wraps around all of that. We're getting somewhere. If we're going to float the aside to the left, let's go ahead and float the main to the right. So I've chosen main and I'm going to hit float right. It's getting there but now something funky's happened with the footer. What the heck is going on there? That is definitely not what I want to happen. So what we need to do, it is actually behaving exactly the way I told it to. Any time something floats to the left, everything else wraps around that thing which is exactly what's happening. It's exactly what I told it to do, exactly what I don't want. So what I want is I need to tell that footer, "Hey, you need to clear the float." So if there's anything floating around you, make sure you clear it. Don't show up until the floated things are done rendering and then you show up. So that's going to go on my footer. So I come down to my footer and underneath float, I have clear. I can clear left, clear right, clear both, clear none. I'm going to clear both because I might change my mind and put that aside on the other side someday. So just to cover my butt, I'm clearing both. And look at that. That's what I wanted. So I'm going to save this. I'm going to Save All actually. File, Save All. I'm going to give Dreamweaver one more opportunity to redeem itself. Oh yes. It did. It needed food. It was grumpy. So now my aside is on the side and my main is where it belongs and my footer shows up underneath. Everybody's happy. - [Female] So I noticed on the aside the text is butting right up at the bottom and because it's different color. So you need to add padding to that or...? - We could add padding. Either way. That's a good question. I could add padding to the text in the aside. I could add padding on the inside of the aside itself. So I can add padding or margin to the paragraph text in the aside, or I can add padding on the inside of the aside. However, I'm not going to do either one of those because my goal, once we start getting images in, I want it to visually look like it's going all the way down the page. There's no way to actually...there is but it's a whole other story. They claim that there's JavaScript that makes it work but I can never make it work so we're not going to go there.

Class Description

Adobe recently announced significant changes to Dreamweaver, offering a brilliant new interface making websites easier to build–and more beautiful than ever before. Empowering non-technical users to build a website, this class you will teach you how to create a basic brochure-style website using Adobe Dreamweaver.


Adobe Certified Instructor Melissa Piccone shows you how to: 
  • Create a website from start to finish 
  • Apply web design best practices 
  • Understand Dreamweaver basics 
  • Customize Adobe Stock Templates 
  • Identify basic code to help troubleshoot 
Join us for this helpful class that will give you the tools you need to have your website up and running.


Software Used: Adobe Dreamweaver CC 2017

Reviews

lovemydreams
 

Great Class! Her teaching style is easy to follow and I feel like how excited she is about teaching Dreamweaver. I've taken other classes and by far Melissa class is worth taking because she loves creating websites. She shows coding and explains it in a way that if you are new to it you will understand. Learning Dreamweaver with Melissa is fun and worth it! Thanks, Melissa and creativelive!

Kathleen
 

I love this, she's great BUT...she's going wayyyyyyy too fast. I'm watching it live and working from scratch along with her but I can not keep up and I'm not a beginner.

Linda Knapp
 

She did a good job at touching a variety of different parts of Dreamweaver and showing how to use its capabilities. She did go pretty fast and I had to do a lot of rewind and rewatching as I built the sample website along with her. I would have been frustrated if I was in the classroom. All in all though I found the class easy to watch and informative.