Dreamweaver - HTML and CSS Using Dreamweaver

How to clear the div float

Questions

Course info

34 lessons / 3 hours

Overview

Dreamweaver (and web design in general) is such a hard program to teach yourself. We know, because as Dreamweaver trainers we have all taught ourselves. We wish we had a resource like this when we were learning.

Hand coding a website from scratch is now a thing of the past. Web designers use tools like Dreamweaver to a lot of the heavy lifting. We imagine this is your first website build and we're glad we're here to help make this process a little less troublesome. 

Who should use this?

Anyone that is brand new to Dreamweaver and anyone brand new to web design in general. If you're reasonably experienced in web design you might find this course a little slow going.

What do you need?

  • You'll need a laptop (Mac or PC)
  • Dreamweaver CC installed. Dreamweaver can be downloaded from theAdobe website here.

Can I use this tutorial with Adobe Dreamweaver CS4, CS5 or CS6?

No. Unfortunately there were some fundamental changes in the Dreamweaver CC update that makes CC and previous versions very different.

Remember you can download Dreamweaver CC free for 30 days. Don't worry - after your free trial has expired your files will still be updatable using any other web design program.

If you like the tutorials we'd love you to like, share and tweet it. We'd be very grateful.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

Hi, and welcome to this Dreamweaver tutorial. My name is Daniel Walter Scott,  and I'm a trainer here at Bring Your Own Laptop. What we're gonna look at now is we're gonna look at  something called clearing the float. Now, in a previous tutorial,  we looked at getting these text boxes side by side. So we've got our text box and our image  and that was called Float. So we floated him to the left  and we floated him to the right  and it means they sit side by side.

The problem's gonna happen. Now if I add another text box  to sit underneath, it will try  and slip underneath these two. So we need to do something called clearing the  float to stop that happening. So let's insert a diviv tag and it's gonna be our footer. So let's insert div tag. I would like it after my  image box.

This one's gonna be called footer, okay? And it ends up in the right spot. But if I give it some size, watch this. So let's style it. So main CSS let's style it. I'm gonna style the footer.

I'm gonna give it a width of 1 24 pixels,  1024. I'm gonna give it a height of pixels 200. Okay? And I'm gonna give it a background color of  what do we have got red. Alright, you'll see we end up with a problem where  actually what's happening is the red ones slipped  underneath this, uh, these two boxes. 'cause they're floated.

And this squid is out the bottom. So what we need to do is fix that. And it's quite simple. It's called clearing the float. So whenever you floated boxes, the box directly  underneath needs to be cleared. To do that, we go to our, uh, CSS, we go to a footer  and we're gonna scroll down until we find, um,  actually we're gonna go to layout and then scroll down  until we find float like we do with the rest of them.

And under, underneath, that one's called Clear,  we're gonna use this one called Clear both. I'll zoom in there for you, so find clear both. And what you'll see now is the footer kind of reappears. He slips back from underneath these guys. And there he is, there, there's our big footer. It's probably a little big, but that's all right.

Okay, so that's how you get a box to appear right  after you've cleared the float. All right, I'll send you the next tutorial.
Bring Your Own Laptop
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025