Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this movie we're going to find out how to avoid problems like you see right here on the screen. I floated to the columns to the left actually in this case and given them explicit widths, which is a bit of a rehearsal from before, but it helps to illustrate what's going on. We've got this green stripe problem. That's the footer actually. The footers all away at the top of the document, up their equal with the two floated elements, the two floated images, with the two floated columns and you can see that content right there to the right, that's not good. You might think ok, well maybe I'll float this sidebar to the right and that will push it down, but actually not so much, that'll just let the content of the footer flow between the two floated divs, and it doesn't really move down at all. What we need is, we need a way to push the footer down so it's below these floats and fortunately there's a way to do that. It's called clear. Clear to the rescue.
So what I'm going to do is add a little style here, footer and I'm going to say clear left. Ok, so what I'm basically saying is I want this element, in this case the element with an ID of footer to have itself pushed down so that it's beyond any left floating elements that come before it in the document. Ok, so push it clear on down, clear it down. If we hit reload the footer gets away, it actually hasn't gone away, it's dropped down to the bottom, but notice, it's cleared to the left.
It's clearing down below any left floated element that comes before it. So, it's not clearing below any right floated elements like the sidebar div. So it's just going to keep going right on under the sidebar div. If we want to clear it below both, well, if we want to clear it below the right floated div, we can say clear right and that's going to push it down blow any right floated div, but of course, what happens if that left column becomes taller. We're going to have an overlap problem again. If the left-hand column did become taller on, let's say a different page, then you'd still have the footer cleared below the right floated sidebar, but then the content would get showed around and there'd be overlapping and it will be bad, so better still, clear both, which is clear this footer below any floated element that comes before it, which has no apparent effect here, but should the left column ever become taller, then the footer would keep getting pushed down below the left floated column, or the right floated column, whichever one is taller.
This is why floats get used for layout in the first place, it's because of clear, because you can take the footer and just stick it on down there and that's pretty much clearing there for you. Now, the way that clear actually works technically is that the top margin of the cleared element is automatically overwritten and set to a sufficient size that it puts the visible portion of the cleared element below any previous floats. So if we were to try to set a top margin for the footer, we might say, you know, what we want is we want to, actually let's make that bigger, we want the footer to be 20 pixels below anything that floated beforehand.
You can see I just said margin 20 pixels and that put 20 pixels of side margin to any pixels of bottom margin, but there's no top margin, because the way clear works, it's overriding that top margin. So, if you want to actually have the footer pushed away from floats that come before it, what you need do is you need to put the margin you want on the bottom of your floated elements and it's better to do both of them because you don't necessarily know which one will be taller. So, this way, which ever one of these two is the tallest on a given page, there will be an extra 20 pixels of bottom margin, on the bottom of the floats and that will push the visible portion of the footer down by 20 pixels. So again, if you want some sort of separation, 20 pixels, 2ems, whatever, between your floated columns in your footer you need to create that separation through bottom margins on the floated columns not on the top of the footer.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.