Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The last positioning model we need to discuss before we can begin laying out our page elements is floating elements. Now if an element is floated, essentially it's removed from normal document flow and it floats either to the right or to the left based upon the float value, because you can float it to the right or to the left, and they position themselves until the floated edge touches the edge of the containing block, and that could be the parent element or that could be the body tag if that happens to be their parent element itself the containing element. Now the trick here is that any element that comes after them in the document flow moves up to occupy the previous position. In the example, you are seeing them slide, Box 1 is floated to the right, so Box 2 and 3 come up and float beside it. In the slide, Box 1 is being floated to the right, meaning elements Box 2 and Box 3 move up to occupy the position Box 1 used to occupy. The problem that most people with floats is they don't really understand that removing it from normal document flow means that Box 1 could overlap Box 2 and Box 3. So if you take Box 1, and float it to the left, Box 2 and Box 3 will merely move up underneath it, and some browsers, and Internet Explorer being the most obvious one, they correct that by going ahead and moving those elements over to the right and that's actually an incorrect representation of the box model and standards-compliant browsers will actually show you the elements floating up underneath it. So what we are going to do now is we'll go back in the Dreamweaver, and we will float some elements and we will check out the behaviors of removing it from the normal document flow and how block-level elements react to each other as they are floated. So in Dreamweaver, we are working on a floats _basic.htm file and you will find that in your Chapter 3, Exercise Files and a quick review of our element on the page, we have box number 1, box number 2, and box number 3, and their div tags where we have assigned them a width and a height and a background color and padding. So those box elements those box-model elements have been defined in each of this. So I am going to go over to my CSS Styles panel and I will select box number 1. Now I am going to expand my CSS Style panel down a little bit so that I can see all of the properties and modify them without actually having to go into code or open up another dialog box. So I am just going to go ahead and click Add Property, and we will go ahead and choose Float and remember you can begin typing it in to jump down or you can just select it from the menu, or you can just type in Float, and we will go ahead and float that to the right. Now when we do that, notice that happens to box number 1, it moves over to the very right edge of the container elements, there is a div tag that wraps around all through these elements called container. Container itself has a defined width, so Box 1 goes as far right as it can, which is right up against the edge of the container. Box 2 and box number 3 move up to occupy that space. Had I chosen it to float it to the left, notice what happened. Box number 2 and box number 3 moved up to occupy that same spot. Now the background for box number 2, notice it slides up underneath the background of box number 1. However, the content for box number 2 doesn't move up; it's pushed down. It's considered to be overflowing its boundaries now. So that can actually cause quite a problem when people are expecting to create kind of a two-column layout with box number 1 on the left and if I were to preview this in a browser, and I am going to save changes so I can preview that. You can see that Firefox renders it the exact same way the green background is actually hidden because it's exactly the same size as box number 1, and then box number 2 is pushed down. So when you are doing a float, you got to understand that the block-level elements underneath you, if you are floating them on the same position as your previous elements, they are just going to come up to occupy that space. Now, a lot of time you can arrange elements by floating multiple elements. I am going to select box number 2. I will add a property to it, and we will just go ahead and float it and we will float it to the left as well. So notice, Box 2 is now floating to the left. Now it's suppose to float as far left as it can, and often that will result in touching the containing element, and in this case, it's actually touching the previously floated elements, so butts up right up against that.
And of course box number 3 did exactly what we expected it to do. It just came right up underneath and occupied the space that Box 1 and 2 used to occupy within the document flow. So we will select box number 3 and we will go ahead and add a property there. So I will add float to that, and we will float this one to the left too. Ugly enough, floating box number 3 to the left occupies, makes it occupy the far right edge of our containing element, and so box number 1, floats to the left, box number 2 floats to the left and box number 3 floats to the left, and because of the fact that they are floating as far left as they can, they are touching each other causing a horizontal alignment of the three elements. So a lot of times when you want to horizontally align some elements, floating them to the right, or floating them to the left is actually a really good way to do that. The containing elements still has some control over that, but I don't know if you noticed it or not, the yellows sort of went away. As I save this file and preview it in my browser again, and you can see there is really no trace of the containing element and that's due to the fact that containing elements that have floated elements inside of it tend to collapse, and we will deal with that in a later movie, but one of the things I want to talk about right now very quickly is how elements can get hung on one another.
If I take our containing element and add a width property to this and give it a width of around 500 pixels, notice what happens to box number 3. It can no longer fit horizontally within that 500 pixels, so it has to break back down to the next line. So we can actually control how our floated elements position inside our containing elements by controlling the width of the container, and this is easy enough to do, but sometimes it causes elements to get hung. Box number 1 isn't that tall, so box number 3 is able to just return right back to the next line but if we took box number 1 and we modify its height property and change its height to around 300 pixels, what would happen to box number 3. It can't make it over against the far edge anymore, so we end up with what almost looks like a two-column layout and a lot of people actually use this to do it a two-column layout. You have to be really careful about this however. You'll notice that if I take the height to back to say 110 pixels, even though it looks like box number 3, it should be able to occupy the left most edge, it can't because the little tiny corner is keeping it from doing that. So uneven heights can cause your floated elements to hang like box number 3 is hanging currently. Well, we've taken a look at floating elements and how they react to each other when you float them to the left or to the right of each other, how multiple floats affect each other, but one of the things that we saw here was the containing element collapse. So in our next movie, we are going to talk about clearing floats and dealing with some of those collapsing issues.
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.