In this video we discuss the CSS float property. We discuss what the float property is and how it affects the normal flow of HTML elements. We look at what happens to an HTML element that is defined as float:left; We consider various combinations of floats, element sizes and margins for arranging HTML elements on a page.
Once we understand the float property we apply it to a member’s site to get her search form up beside the logo in her custom header.
Rick: We’re going to talk about here which is making that on your site here… getting this search box to go where it belongs, right?
Pam: Right, right.
Rick: And have you figured out what this problem is?
Pam: I think it’s what I have not attached when you look at the post down in the lower right, there’s the place where you point it to the image that you want with dynamic content gallery to use and I don’t have those images uploaded yet.
Rick: Yes, that’s right. Okay, perfect.
Pam: So I know what that problem is. It’s just ugly and I’m living with it.
Rick: Okay and you’re just going to fix it when you get the chance, right?
Pam: Yes, yes.
Rick: Yeah, right. Okay, so now the next question here is how to deal with this and get it up there where you want it and right now, what you have is you have this h1 tag, this logo tag, and you have this mml search box and what we’re going to do is we are going to float the h1 tag and we are going to float the mml search box and that is going to be how we solve the question of getting these things together. In order for us to do that, we’re going to start off actually with a presentation I made about understanding the float property because this is something that I’ve wanted to talk about for a while and I’ve just never found the opportunity to do it.
So we’re going to talk about positioning HTML elements with the float property. And so the float property is… well, with the CSS float, an element can be pushed to the left or to the right, allowing other elements to wrap around it. And so if the element is defined as float left then it will of course, float to the left and stuff will go around to the right. If it’s float right then it’ll move to the right and then stuff will come around the left. When you…inside of your text editor, when you tell an image inside of a post that it is supposed to be left aligned, WordPress adds a float left designation to it so that the text can come around on the right hand side. That’s what’s going on with the float.
And so the normal flow of an HTML element is that HTML elements generally expand horizontally to fill up the available space and then stack vertically. So for example on my… in this site I created to demonstrate this purpose, I have 4 divs. I have div box 1, div box 2, div box 3, and div box 4 and each one of them is just sitting there expanding to the space available horizontally and then the next one stacks on top of it. And if you want to see what that looks like inside of… yeah, let’s kill this one… take a look at that inside of pages here under floats and positioning, this is what I’ve got. I’ve got a wrapping div called byob float position and then I’ve got 4 divs just side by side or stacked on top of each other – byob box1, byob box2, byob box3, and byob box4 – and then those boxes, I’ve assigned in custom CSS, I’ve given each one of those boxes a color so you can see the extent of those boxes and this is default HTML behavior.
So what happens when you float an element is that the floated element is reduced to its minimum size and then the next element jumps up beside it if it’s possible. So if we go back over and we take a look at this for example and we look at… if we add the float property to box1, so we go down here to box1 and we type float:left; all of a sudden this space has dropped all the way down to its minimum size. And now since it’s not been given a height or a width, it’s minimum size is just right up against the text. We could easily give it a height, height:100px and give it a width, width:100 px; and now that’s its minimum size, right? So the HTML element will drop down to its minimum size and then everything that can will pop up to its left. Now if box2 had a size of say, 500 pixels with colon 500 px, then oh well okay, 500 pixels does work. Let’s give it a size of 600 pixels. Now, isn’t that interesting? I assumed that giving it a width would push it down below that and I think it’s because I don’t have enough content to it. So since this div doesn’t have any extra content, it…oh no, actually, it’s not behaving what I thought I would. But let’s take that down to 100 pixels. Now that is the funniest thing I’ve ever seen. Did I just mistype it? 600 pixels works fine but 100 pixels drops it down. Oh my gosh, it’s totally misbehaving.
Anyway, well I’ll just keep with this presentation. Anyway, so the next element jumps up beside it if it’s possible. Okay and so then we have the clear property which turns that off. And so the clear property will prevent… which will tell an element which side the float should be turned off on and so in this case, if we go back over to here, this is really behaving as if I’d said clear left ‘coz that’s what would happen in this case is clear: left ‘coz it wouldn’t allow it to float to the left.
But before we do that, let’s just go ahead and add these widths and to each one of these elements, let’s see, what is wrong with box2 and box3 here? Something’s wrong with it. Inspect the element, box3. Okay let’s take a look at box2…box2 background color, height and width…and okay, so if we say float:left; and then if we say float left; you know, I’ve got an error in here that’s throwing this off and I don’t see where that error is because let’s say, float:left;… I don’t know why that’s behaving that way. Any case, what you have now is because each of these things have floated left, each one pops up beside the other. And so this is how we accomplish our navigation, our image navigation in the tutorial on that and you know, if we gave a… let’s see, if we give a margin left:10 pixels, you can see that you know, we can space these things out.
Now what happens though is if we increase these to a size that is too large… whoops, if we increase it to a size that is too large to allow them to float side by side, then they don’t float side by side. And this is what often happens to people with these sidebars is that you know, something will happen and their sidebar will jump down below their content. And the reason that is because the sidebar is floating in the given direction and something has happened to the thing in front of it, that is making it too wide to be able to float beside it. And so that’s where you’re going to look to find that problem. And we did all these as a float left but we can also do these as a float right. So for example, we could float box3 right and you can see it’s going to you know, jump over in this direction instead of to the left. Box4 still can’t pop up beside box3 because box4, there’s still not enough room here for box4. If we made box4 only 20 pixels wide, there would be enough room for it to jump up. And because box3 floats to the right but box4 floats to the left, it’s going to be able to pop up there to the left, even though box3 is in front of it.
Now if we made box4 float to the right instead, the first one that is called goes to the right and then the next one goes to the right and then the next one would go to the right. And so it looks like these are happening in opposite order but that’s the way it works. If you describe something as floating to the right here, then the thing after it, if it also is floating to the right, it’s going to float to the right beside it. It’s going to go work in the opposite direction.
Okay so now let’s say though that you want to clear the float. So you’ve got box1 and box2 but you want box3 to sit down beside box2 even though there’s enough room for it to pop up beside that. What you’re going to do in that case is you are going to say clear colon left and now what happens is, it clears the float that is to the left of it and as such, it just drops down the line below. Now because we floated it to the right, it’s still hanging off to the right but it is no longer recognizing this box’s float property and that’s what that clear does. It’s a left float property for this box so this box needs to clear the left or clear both in order to not jump up there beside it. Now if we take this back to the left and we clear left, you can see still even though there’s the room, it’s not going to jump up beside that because this has been told to clear that float and it’s as if that float doesn’t exist anymore for this thing. In fact, you could eliminate that float by misspelling it. Well, what we did there is we eliminated its width definition by doing that. Now take my word for it. This is the way it’s supposed to behave and what’s happening is, something is behaving funny and I’m not quite sure why but anyway, that’s where some of these things float. So now let’s apply this float property issue to your condition here. Macintosh library, here we go. And so we’ve got this library, this h1 element right here which if we hover over it, we can see that it spans the entire width of the space available to it and what we’re going to do is we’re going to give it a width and then we are going to float it. So we’ll go to custom CSS and we come over here to header and let’s just go above this. We’ll say .custom and then this is id logo so we’ll say #logo and we’ll give it a width of 600 pixels, call it that and then we’ll float it left.
Now what that’s just done is that has told the next element that if it can float beside this, then it should. And so we’ve got the custom logo and now it’s floated up there beside and if we look at our search forum, we’ve got it already floating to the right. You know, I would probably raise it up a bit though so I would probably reduce its top padding say, let’s make it 20 pixels…120. Okay, so that worked. Now what’s happening though is that this menu, because this is a floating element, now the menu is trying to float as well. And so we have to tell the menu not to try to float. And so that’s what we’re going to do here, we’ll do .custom and UL .menu then we’re going to say clear both or clear left or we’ll say clear both; okay. So now, it’s not going to try to jump up there and in fact, let’s see if we can… let’s see, let’s try that again. If I wanted to get it lined up with that like this, I’ve got about another 10 pixels, I’ve got to move it up. So padding top, let’s take it to 110.
Now look, that’s exactly what I wanted it to look like. So now your search bar jumps up there and if you want a little bit of padding between the dynamic content gallery and your menu, then you could also just add that to custom UL menu and say, margin bottom: 20 pixels and now it drops down there like that. I love your colors by the way, I mean, this is a really pretty site and I know you’ve been a little frustrated with how it’s been going but I think you’ve done a beautiful job on this. So I’m going to take this code though and I am going to add it to the forum real quick Let’s see, open link a new tab… we’re going to make our way down to the forum and Live Questions and Answers. Add a new topic and this going to be move the search form to beside the logo. Here’s the code and then we’ll just paste that code there and hit CSS, delete this. Post a new topic, okay and then you’ve got the code. I’m going to turn you back on here, Pam. Okay, Pam?
Pam: Yes, that’s great. That is really helpful. You can see my question here. The reason I had the search bar hanging down is that space above it, I want to put an image that will be clickable to link back to the church that this library is attached to. In other words, go back to that homepage that people came from. So I think what I need to do is add that image and it will also float left and then first it’ll float from the library logo left and then it will float that one left and then I think I can still click the search bar underneath. Is that correct?
Rick: Absolutely. Yeah, if you had some element… let’s just say your image was you know, this big and that was an image link that linked off to the church.
Rick: Then if you gave it the same stuff this has which is just the float left property, it didn’t pop up here beside this, and then the search would still pop up under it just like that.
Pam: And then I would need to reduce that top margin for the search bar because it no longer needs the 100 and however many pixels. It just needs a little bit.
Rick: Oh, absolutely because it would definitely force it down here.
Pam: Yeah, that’s great. Oh, that’s wonderful. I really understand it. Now, what do I do to center that navigation bar just like what you were doing with Brantlers? How would I get my whole little nav menu there to center?
Rick: Okay, well again, it is the same thing which is adding a left margin. So margin… or actually I think I had padding, didn’t i? Padding left colon 200 pixels.
Pam: Okay, got it. I just wasn’t sure where to put it, okay that’s great.
Rick: I still can’t type, can I? You know, it never works if you don’t… see this is why I always insist that everybody work on their local machine ‘coz I can’t type a single piece of code without a typing error, for the life of me. So… but you can see what happens here, right? You just pick a…
Pam: That’s because you were an architect, not a secretary, Rick.
Rick: I guess so. Although back in 1975, I was the only male in the typing class I took. But we weren’t expected to need to type back then so…okay, any other questions, Pam?
Pam: Rick, that’s so helpful. No, that’s wonderful. It’s so encouraging to be able to get this fixed.
Rick: Great. Well, good luck with it and feel free to ask me any questions that may come along.