FREELessons: 32Length: 5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.8 Floats, and a Simple Layout

[SOUND] Today, I'm gonna teach you about CSS floats. The finicky CSS floats. So we can use floats to create the effect of columns. And while this isn't ideal and there are some ways with CSS to make it easier. They're not gonna be supported in all browsers because they are somewhat new. So, best to learn the basics first. Here, I had a div with a class of wrap for our website and a simple heading. Now, what I want to do is create our main content area. And then, I would also like to create a sidebar section that maybe has navigation links or it could have a, a list of categories for our blog. You're familiar with sidebars, likely. So, here, let's first do our main content. Here, I'm gonna use an id of content, though you could equally use a class of content if you imagine using the styling again. Within here, I will write this is my blog, and that should be fine. Mostly, we're going to focusing on CSS. And next, I would like to create a sidebar. So there are two ways to do this. One of them, will be to continue using a div, and you'll see this quite a bit, especially in older websites. You apply a class of sidebar and this doesn't do anything magical, the word sidebar doesn't do anything, we could call it anything we want. But, this gives us a way to target the sidebar and style it accordingly. Now there are new HTML5 elements that we can use that allow us to keep from using divs over and over. Because remember, divs don't have any semantic meaning at all. They're simply wrappers. So if we can't use elements that have meaning, we should always elect to do so. In this case, we're gonna use an aside element. Now this doesn't only refer to a sidebar. It just means information on our website that is connected, that should placed aside to some content. So while we can use it as a top-level sidebar, it can also be within, perhaps, an article within your blog. You could have an aside section. Within here, I'm gonna use an h2 and write Sidebar, and then I'm gonna add a list of links, and if we're gonna do a list of links- We wanna make sure that we use an unordered list. So first, within the list item, I'm gonna use an anchor tag, and here, we're gonna use the generic pound sign because we aren't linking to anywhere specific in our case. And we'll say Home. And then I will copy this a few times, and we'll change this to About and Contact. And then if we wanted we could continue with our sidebar, but I think it's fine for now. And also within our content section maybe I'll say, Main Content Heading. Just some gibberish, so that we have something to work with. This is a fine website. So now I'm gonna come back and reload the page, and here we have it. So now our job is to figure out how to get this sidebar to the right side of our main content area, so that it looks like a real website. If we browse the net tuts you can see, if I zoom out a few clicks we have our main wrapper, and then we have our main content area, and then we also have a side bar that's pushed off to the right. Let's try to recreate this. First, we are referencing our style. That's CSS file and now we can get started. The first step is to, if we come back, reference this class of wrap. As we learned in the last lesson, the quiz lesson, we can apply a width of 600 pixels and a margin of auto to center our website on the page. The next step is, let's use background color so we can easily see where each section begins and ends, and this is important to remember: these are just boxes. So for example, if I come back, and we wanna reference div with a class of content, I do .content, background red. And then if I wanna reference all asides on the page, I could say background: brown. Now, let's refresh. And you can see these are all just boxes. If we were to apply a background color to the wrap of yellow, these are terrible colors but, you'll see, again, this is a big box. The yellow is cutting off because the side bar is filling up the rest of the space, and that will be stacked a little bit higher in terms of the z index or the z axis. So, let's get rid of the yellow and we'll stick with our colors here. But we wanna make the sidebar lesser in width, and pushed all the way to the right, and we can accomplish this by using floats. So first, I'm gonna target the main content area, and specify that it should float to the left. And now you can see it automatically reduces. Now, keep in mind there is no dedicated width here. It's going to take up all available space that it requires. So for example, main content heading. Watch what happens if we come back and if I were to duplicate that to make a longer heading, it's going to take up all of that space as well. So, that might be okay for you, but probably, you wanna have a very specific width. We come back to style at CSS, our wrap is 600 pixels. So, why don't we specify a width for our main content area of 500 pixels. Now, if I come back and refresh, it's taking up exactly 500 pixels regardless of how wide our headings are, and now that I look at this, I'm thinking our side bar is a little bit too narrow. So, why don't we fix that. Come back and let's make the width of our content area 450 instead. Refresh and now because we floated our main content to the left, and specify the width, anything below it will jump up. The next step is we wanna simulate more of an actual website, and it's difficult to do so when you don't have much content. So, why don't we adjust the height of each of these so that we can see a little bit more. Here I'm going to target the content. And the aside and we're gonna set the height to 600 pixels. Now we need to note two things here but first let's make sure it works. Refresh and sure enough the height has been increased. Now number one, rather than pasting height in here and here, we can reduce that by targeting both elements using a comma. And next, you want to stray away from using heights. Very, very rarely will you use an actual height on especially a wrapping element, and that's because you wanna let your content determine what the height is. In a real website, you wouldn't want all of this spacing down below. Also, as soon as this content takes up all of the 600 pixels it maybe cut off. So in general, try not to use heights on your layout. But it's okay in this case so that we have something to work with. Next, I want you to take note of these bullets here. Why does it seem as if they're coming outside of the sidebar. I'm gonna right-click and choose Inspect Element in Google Chrome. And if I hover over the URL I want you to note how it seems as if it's taking up space within the main content area as well. If I hover over the list item, you'll see the same effect. And this is something you should be careful with. If we're floating the content area, and this is being pushed up, why don't we float the aside as well. And I'm gonna float that one to the left, or you could also do the right. In this case, we can push it up to the left as well. That's better. And now you can see if we hover over it, it's only taking up that specific area as it should. Next I see that the list items are pushed over to the edge. We don't want that. Why don't we make them line up with the sidebar? And the reason they're pushed over is, again, because that browser is applying some defaults for you. Now, this is easy to trip you up at first because you don't know what is being applied by default. In this case, it's adding padding-left to the unordered list. So I'm gonna revise that by setting padding-left to zero, and I need to make sure I only target the unordered list that is within the aside element. Refresh, and now that's being pushed back over. And if you wanted, you could adjust it slightly. So, you could maybe make it 18 in this case. Or, if you wanted to get rid of the bullets entirely, you could say, list style. What kind of style for the list elements. And we're gonna say no styling at all, and that will get rid of the bullets entirely. And then if we adjusted the padding-left back to zero, that'll push it up against the edge like so, and you have the beginnings of what would be an actual website. Now, I want you to note, if we try to resize this, it stays the same width no matter what. What if you wanted it to adjust? Well, another way is to use percentages to declare your width. So why don't we try it this time? And I'm gonna say, I want the width of the wrapper to be 80% of the width of our entire browser window. Next, here, I'm gonna set the width of our content area equal to perhaps 70% of this containing element. And then I'm gonna set the aside, and we'll keep that like so for the time being. Now if I refresh, I can resize, and notice that the elements resize as I adjust the browser window. Now, you might be wondering why the sidebar is staying the same, and that's because again, it's taking only the space that it requires here. So it takes up as much space as to fill that longest word, Sidebar. If you want to explicitly state a width, you can say width: 30%. 70 plus 30 equals 100. Now if I refresh, you'll see that it's taken up 30% of the entire width. If you want to adjust this, you can say 90 for content, and 10 for the sidebar. And now, we have a much more flexible content area. But now we have a new problem. It's fine here but if, soon as I scroll all the way down you'll see that the width of our sidebar is too small because at this point, 10% of a width of around 400 pixels is very little, only 40 pixels. So, what if we wanted to set some minimums? And why don't we try that? We have a width of 80% and we'll set minimum with, to around 600 pixels. And while we don't have to it's easier for me to read if I first see. First, we're gonna have a minimum of 600, but then the width can be as much beyond that as it needs to in order to be 80%, but it can't go lower than 600 pixels. Now if I refresh, it seems the same for the big window. But now watch what happens when I reduce it. It's gonna get to a point right here, it's not going to get any more narrow. And we can do the exact same thing for our sidebar. So if we want to set 20, 80 refresh, that looks good. And we want to make sure that no matter what, the width is appropriate. Good, now you have a more flexible website. People browsing in lower resolutions can access your site, and then for larger resolutions you can provide a different set of options. Maybe you want to display more at the top. You can do a lot of stuff here. Now, we need to go over one more thing for today. Watch what happens when I apply a background color to our wrapping div right here. Background equals green. What do you think's gonna happen? Refresh. And isn't this odd? The background color for our entire wrapping element seems to only be taking up a heading element. And why is that? And the only reason is, watch what happens when we remove the floats. Refresh. Now it is taking up all the available space. So it seems that when we apply floats, it takes these elements out of the flow of the document. Now this is only partially true, but for where you are, it makes sense. When you float an element, you're saying I now longer what you to have a blocked display where you're gonna take up as much space as you can. I'm gonna rip you out of the flow of the document, and when it does that, the background color for the wrapper assumes that there's nothing below it. So this is a problem, and this is something that gets people tripped up quite a bit. There's lots of ways to fix this. One of them, and the most traditional way, is to use CSS property called clear. So let's imagine right here, we had a footer. And this is a new element for you. It designates the footer of a particular section, whether it's a blog posting or a website. And I'm going to say, My Footer. Now if I refresh, notice how it seems to trigger the wrapper and the only reason it's doing this is because both of these elements, this one and this one are floated. So, they're out of the flow of the document. But our footer is not. So that triggers the wrapper to contain it. It's a way of clearing it, footer, and we're gonna clear anything that occurs above it. So if there's any floated elements, this is going to clear it. And now, if we refresh, you're gonna see the same thing. But if you ever find yourself in a situation where it seems an element is way up here into a different section, and it shouldn't, make sure that you're clearing it so it clears any floats that are above it. Now, another way that we could potentially solve this if we had no footer, we come back. We're still with this problem despite using a trick called overflow hidden. Overflow, and set that to hidden. And I don't expect you to understand why this works. For now, just accept that it's a way to trigger the browser into containing the elements within whatever you're specifying here. So just accept that is a little trick to make sure that it contains it. So good job, we've covered a lot in this lesson. If you need to go back and watch it again do so, because these techniques are going to be vital in your web design career.

Back to the top