CSS3 Tutorial for Beginners: 32 Clearing Float Element

This is Sasha and welcome to another CSS training video where I share with you some insight on how to edit your business webpage if you’re looking to modify that website. Now in today’s video, what I’d like to do I cover the float element, and it’s great if you have block level elements within CSS. Let’s take a look at how this works because it goes ahead and interrupts the flow of your layout.

That way you can float elements left or right or position them accordingly to the framework of your website. Let’s take a look.

Here’s what I’ve done with this website to give you some insight on the HTML and have a navigation div tag at the very top which I’ve styled red and you can see that, that’s the color there. I have a left column right here which is purple, and there’s a handful of text right there that you can see then I also have a right column which I’ve added a bunch of links there from one of my other websites.

You can see, it’s just a little bit yellow, so that’s our right column here on the stylesheet and then a footer navigation at the bottom which I should correctly rewrite here at footer navigation right there and you’ll make that – and you’ll see that change happening right there and that’s kind of like a baby-blue-sky-blue color.

--------------------- HTML CODE ------------------

 

 

 

 

--------------------- CSS CODE ------------------

.navi {background: #ff3a3d;}
.leftcol {background: #ffd6fc;}
.rightcol {background: #f2bb68;}
.footer {background: #91c8e0; margin-bottom: 150px;}

Anyways, let’s see, usually a website, the way that it works when you’re looking to stylize these elements and position them correctly as you can see as a block level element, it goes all the way left to right. But what if you want this purple box to be to the left of the yellow box, okay, and you want the yellow box on the right. What I do within my trading stock trading website so you can see I have this white box over here and then I have these other boxes here on the right, and that’s the navigation right there.

Floating elements

What if you want to do something along those lines? Well, what you need to do is targeted these elements and float them, and usually, you can’t float them without a width. Because if you look at right here when I add in a float and left, you can see what’s going to happen is it actually just remove that spacing there at the top because we got we got rid of the space between the navigation and the next level of the div tag because now you’re floating it rather than breaking up that space.

Since you’re breaking up that float and the same thing here on the yellow area but it didn’t position it to the left. What I need to do is also define kind of width so I’ll go ahead and establish a width I’m just going to say 100 pixels to see how it looks and let’s see right here.

--------------------- HTML CODE ------------------

 

 

 

 

--------------------- CSS CODE ------------------

.navi {background: #ff3a3d;}
.leftcol {background: #ffd6fc; float:left; width: 100px;}
.rightcol {background: #f2bb68;}
.footer {background: #91c8e0; margin-bottom: 150px;}

You can see right there 100 pixels on this one, I floated it left but then this one, the yellow part, goes right back into it because now I have the smaller compressed version right there and the yellow one attempts to butt right up to it.

What we can do on the yellow one is I can actually – and this is causing a little bit of trouble simply because I’m reducing the size of the browser. But you can see I have a width defined right there and what I can do on that element just to – let’s break a couple things out here for readability sake.

--------------------- HTML CODE ------------------

 

 

 

 

--------------------- CSS CODE ------------------

.navi {background: #ff3a3d;}

.leftcol {
	background: #ffd6fc; 
	float:left; 
	width: 100px;
}

.rightcol {
	background: #f2bb68;
	float:left;
	}

.footer {background: #91c8e0; margin-bottom: 150px;}

On the right column, what I can do is also float that to the left, okay? I’ll go ahead and float left, okay, right here and you can see it now that I’ve floated it left. It goes right into that one. Now, the footer also goes right into it because again it’s a block level element, it disrupts the flow of things so they’ll compress and go right next to it.

In order to get rid of that, what I could do is type in clear both and now it’s going to clear those elements on those levels and it’ll go towards the bottom between those – that flow of context or that flow of those elements.

--------------------- HTML CODE ------------------

 

 

 

 

--------------------- CSS CODE ------------------

.navi {background: #ff3a3d;}

.leftcol {
	background: #ffd6fc; 
	float:left; 
	width: 100px;
}

.rightcol {
	background: #f2bb68;
	float:left;
	}

.footer {clear:both; background: #91c8e0; margin-bottom: 150px;}

That’s one of the ways to use the transparent area. But here, when you look at the flow, you can also define it as let’s say in the right column, we do width and let’s just say we do 200 pixels, okay, so now you can see how that compress it to 200 pixels, and I’m zoomed in a little bit. Let’s do 100% zoom. I might want to do 500 pixels on the article and 100 or 200 pixels on the yellow navigation area.

--------------------- HTML CODE ------------------

 

 

 

 

--------------------- CSS CODE ------------------

.navi {background: #ff3a3d;}

.leftcol {
	background: #ffd6fc; 
	float:left; 
	width: 500px;
}

.rightcol {
	background: #f2bb68;
	width: 200px;
	float:left;
	}

.footer {clear:both; background: #91c8e0; margin-bottom: 150px;}

You can see kind of how that works out. But unfortunately, I also have this space on the right. How do I get that to be perfect? You might be wondering. Well, what you could do is do a percentage based so I could say, “Okay. Well, this would be let’s say 70%, okay, width and this one, what we’ll do is we’ll do 30% width, okay?”

You can see it lines up perfectly no matter how much I scale it while except the text that runs passed it because the word is too big. But you can see the color of that element right there goes right next to that red one right there and the same thing on the left one.

--------------------- HTML CODE ------------------

 

 

 

 

--------------------- CSS CODE ------------------

.navi {background: #ff3a3d;}

.leftcol {
	background: #ffd6fc; 
	float:left; 
	width: 70%;
}

.rightcol {
	background: #f2bb68;
	width: 30%;
	float:left;
	}

.footer {clear:both; background: #91c8e0; margin-bottom: 150px;}

No matter how I reduce it, that kind of creates the structure of my elements within the floating.

I could also float right, okay? But you’ll see that there’s no effect on this yellow one right there. Now, what if I went and did only 20%? That gives us a 10% gap. If I can go ahead and save it, now you can see, there’s a little bit of gap right there and that’s really good for spacing.

--------------------- HTML CODE ------------------

 

 

 

 

--------------------- CSS CODE ------------------

.navi {background: #ff3a3d;}

.leftcol {
	background: #ffd6fc; 
	float:left; 
	width: 70%;
}

.rightcol {
	background: #f2bb68;
	width: 28%;
	float:right;
	}

.footer {clear:both; background: #91c8e0; margin-bottom: 150px;}

If I did like 28%, you could see there’s a little bit of a gap, and I remove these background colors. Now, what you’ll see is – that gives me that little bit of a cushion room right there. Now, of course, you could do that with padding as well, but I’m just lettering you know that you could define a little bit less space floating something to the right and again play with the dimension and proportions there. But ultimately, that’s how you play with the float element, and that’s how it works within the CSS code.

If you’re looking to make adjustments in your business website with the floats and there’s something that’s off on the elements, I would take a look at that and one of the tricks that I always like to use is if you’re struggling to find it, you know, add a border like adding a solid red border any way you can see that element, where that is, and you can play with it, and you’ll know where the outlines are because you want to make sure everything is corresponding to the appropriate section and everything is aligned correctly.