7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 9Length: 43 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.5 Positioning and Floats

The box model will be influenced in different ways depending on whether a content block is relatively or absolutely positioned, as well as by whether it’s floating. In this lesson, you will learn how the CSS position and float properties affect your layout.

2.5 Positioning and Floats

Hello, and welcome back to Understanding the CSS Box Model. In this lesson, I wanna take a look at how absolutely positioned elements and floated elements behave in the context of the Box Model. And I'm starting with a file called positioning-start.html and you can find that in your project files folder. And in this file, in the body of our document, you can see we have a simple section element with a little bit of text in it. And that section element has a background color of light gray. So let's see what that looks like in the browser. We can see that we have some simple text and a light gray background. So as we've discussed before, many elements, by default, will take up 100% of the width of the parent element, and we can see that here in action. The gray background indicates that section element that's in the body of our document. And that gray background is taking up the entire width of the browser, except for some default padding that the browser adds to the edges of the document. If we were to go into our document, to our body and HTML tags, for example, and just set padding equal to zero, and set margin equal to zero, and then save our file and refresh. Then you'll see that that gray background, or that section element, is taking up the entire width of the parent element, which in this case is the entire browser. Well that's the default behavior, but what if we were to change the positioning of our element and make it absolutely positioned. Let's experiment with that and see what happens. So I'm gonna jump back into our code. And I'm gonna undo these changes here, just get back to where we started, and I'm gonna save that. Again, this is positioning-start.html, and I'm gonna save this with a new name. So we'll go to Save As, and the file we're gonna end with at the end of this lesson is called positioning-end.html. So all the changes we make here will be saved there. So again let's see what happens if we go to our section element here and change the positioning. So we're going to call on the position property and I'm gonna set it to absolute. Now let's save our file, and then jump back into our browser and refresh. And actually that won't work, we need to change this to positioning-end.html, and that gets us where we're going. So now we see that our background is only taking up as much space as the content itself. So when we change the positioning of an element and make it absolute, then the width of that box will only take up as much room as the content needs. So if we were to add some more text here, let's just copy this, and paste it a couple of times, and save our work, then we'll jump back over to our browser and refresh. Then you'll see that the content box expands outwards to include all of our content. Now, we're used to this happening vertically. We're used to seeing the height of our content expand as we get more and more content inside a box. But we're not used to that happening horizontally as we see it happening here. But it's very important to understand how that works. So again when you absolutely position an element it's only going to take up as much space as the content requires. It's gonna be the exact same story if we were to set our position back to whatever the default is, and then just float our element instead of positioning it. So let's set our float property here to left. So we'll save that and refresh our page, and you'll see we have the exact same result. If we float an element to the left, or, in this example, let's change it to right. If we float an element to the right, it's still going to take up, or the box that contains that content is only going to take up, as much width as the content requires. Now this obviously will change if we explicitly set the width, and we saw that when we were talking about columns. So if we were to set our width here to, let's say 50% of the width of the parent element. Save that and refresh. Then you'll see that our content still takes up as much room as we specified. But if we don't specify our width, again, the box will only take up as much room as the content requires. So it will take up as much as 100%. And once it gets up to 100%, then that text will start wrapping. So I'm going to change, I'm just gonna get rid of the width here and save our changes, just so that you'll have access to those. And I can go ahead and add the position property in here as well, set that to absolute. And we'll just comment out this particular line using CSS comments. And I'll just leave that comment there so that you'll have access to those two different properties if you need to copy and paste. But that's how absolutely positioned elements and floated elements behave in the context of the CSS Box Model. So thank you for watching. I'll save that file one last time, and we'll move on with the next lesson.

Back to the top