Build Your Own Business Website header image

What’s the Purpose of a Clearing Div?

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we discuss the purpose of a clearing div as the most reliable way of clearing floats. We use a clearing div to clear floats so that nothing stacks beside it. We also talk about our video on Understanding the Float Property which has detailed information on how clearing divs and float properties work.

Video Transcript

Member: Right there on that line, right there on line 78, this was another question I had written down. Can I ask that now?

Rick: Absolutely.

Member: Okay so the other thing that was kind of bugging me a little bit… that I… if you can show me or refer me to some place that can kind of explain. Right where it says, “clear both”, I just don’t quite fully understand. I know you said that if you don’t put the clear both, it kind of… it will stack you know, like when you do… like float left. Like you were doing the footer widgets or something and if you don’t do clear both, it’s going to stack it. But I’m still not exactly sure like when I should use it, when not to use it. And I don’t know if you can explain that like just verbally or if I need a visual or what.

Rick: Well, I have a seminar on the float property.

Member: Awesome

Rick: That’s what this is about. This is about how to clear floats. And there are a variety of ways to clear floats but this I’ve found to be the most universally reliable. And essentially, my seminar talks about how to use CSS. You know, you’re floating things left and then you want something to expand the whole thing below those left floating things. So you’re going to give that div that’s down there a style and that style’s going to include clear both or clear left or clear right. But it’s simply a way of clearing the float. And since I know that this div class link buttons is going to be floating and it’s going to float to the left, I know that I want to clear that float so that nothing stacks up beside it.

Member: Okay. The webinar you’re… I mean, this webinar you’re referring to, is that recorded? Can I see that on your site somewhere?

Rick: Yeah, it’s a seminar.

Member: Seminar, seminar.

Rick: And…

Member: Because I need to watch that.

Rick: It may be a Thesis seminar.

Member: Or you could email it to me later if you don’t have time to look it up now.

Rick: No, let’s just find it right here.

Member: Okay.

Rick: Next previous post… how to create… Understanding the Float Property. I guess it’s just an answer. It’s a long answer though.

Member: Okay but it’s not a video, right?

Rick: No, it is a video. Yeah it’s under Live Answers – Understanding the Float Property.

Member: Oh, Live Answers. Okay, great. Well, that’s all I need. That’s perfect. Float Property…

Rick: How long is this thing?

Member: Yeah, how long is it?

Rick: It’s 23 minutes.

Member: 23 minutes.

Rick: Yeah. So…

Member: Okay sweet. So I’ll understand it by the time I’m done with that.

Rick: You might. And if you don’t then we should have an extended conversation about it. You should let me know if you don’t and I’ll prepare next week for an extended conversation on the float property.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one