2.3 Alignment CSS
In the last lesson you learned how to control the overall size of elements in your layout. In this lesson, we’ll be stepping through how to align your elements in the way that you want so you can do things like creating columns, positioning logos, adjusting text, and so on.
You’ll learn the classic method of centering in CSS, the basics of the
clear properties, how to align text, and the difference between
2.3 Alignment CSS
Hi and welcome back to Start Here, Learn CSS Layout. In this lesson, we're gonna go through controlling alignment. Of this topic the best thing is to just jump right in and start showing you how it's all done by applying the correct alignment to our site that we've been working on so far. And the first thing that we're gonna do is we're going to turn our main section of content here and our side here into two side by side columns. So in the CSS that we've been working on so far, we're gonna go down and we're gonna find the classes that we have already put in place to set up the width of our two columns. And there are a few different ways that you can handle creating columns. But we're going to be using something of a classic method, probably still the most common method of creating columns and that is using floating. And when you float an element, what you're doing is you're pulling it out of the regular document flow and you're telling it to position itself either over on the left side or the right side. So I'll show you how that looks in action. Our first column, we want it to go over to the left side and we want the second column to go over to the right side. So we're gonna add the property float and our first column we'll set the value left. In our second column, we're going to do the same thing. We'll add the property float and then we'll add the value right. Now we'll save that you'll see the effect. Right, so there is an our two column layout. We've got our first column sitting over here on the left. And we've got our second column sitting over here on the right. Now you could alternatively change the values of these float properties, swapping them around. And then your columns would swap sides. So using the float property for alignment is quite flexible in that way. So we'll just undo that. Now there's something that you need to be aware of when you're working with floating. And that is, as I mentioned earlier, when you apply the float property to an element, you pull it out of the regular document flow. And what that means is it can have a funny effect on other elements that are around floated elements. So if we have a look down here, we can see now that our footer is over here. It sort of bumped itself over into the right hand side instead of being down below both of these columns where we wanted. And that's because the floated elements that are before it in the document have kind of confused the footer and now it doesn't know exactly where it ought to be. So the way to remedy that is that every time you use the float property, you need to do something called clearing, immediately after the last floated element that you've used. So you can kind of consider it as being like ruling a line underneath your floated elements so that after that all the other elements can just behave in the normal way. I'm gonna show you two ways to do this. One is a kind of a old fashioned way, but it's a bit easier to show you how clearing works. And then I'll show you the more current way once you know how clearing operates. All right, so in our CSS we're gonna add a new class and we're gonna name it clear. Inside that we're gonna add the property clear. This property can take the values left, right, or both. You'll use the value left if you only have elements floated to the left that you're trying to deal with. You'll use the value right if you only have elements floated to the right that you're trying to deal with. If you have both, as we do here, then you use the value both. Now you know HTML. This is our first floated element. This is our second floated element. So after the two of the those, we're gonna create just an empty div. Just purely to give us something that we can apply our clear class to. So add in our empty div and then we'll add the class clear. And now our photo is back where it's supposed to be rather than being popped up in here, it's down the bottom back into its normal position. So that shows you how clearing works. But there is a better way to handle clearing. In our HTML here, we have this div that isn't really useful for anything. The HTML itself doesn't have a part in our layout. So it's better for us if we can just get rid of this HTML. So that's what we're gonna do. We're going to use a method of clearing that doesn't require us to add extra markup. And then delete that clear class as well. Instead I want you to look into your source files and look for the class in the CSS files that are provided, clearfix. And then I want you to copy and paste in this snippet. Now some of what you're looking at here is gonna be a little bit more advanced than you really need to be thinking about right now. So don't worry about understanding exactly what this code is doing. If you wanna look it up in your own time, what we're doing here is working with pseudo elements. The before and the after sheet are elements. And basically what this does is it creates an imaginary element that's not really there so it allows us to basically do what we just did by creating an empty div. But that element doesn't really exist anywhere other than in CSS. So as I said don't worry too much if you don't understand exactly how that all works right now. All you really need to know for the moment is to use this snippet of code whenever you're using floated elements. And then here's how you apply it. So our class is clearfix. And what you wanna do is apply that class to the parent of your floated elements. So we've got our side element and our section element and their parent is this main element. So add in class="clearfix". And there we go, we have the same effect. So we're still clearing after our two floated elements, but we haven't had to add any extra HTML to make that happen. All right, so we've got our left and our right column sorted out. But right now our whole site is actually still aligned over to the left. I'm just gonna zoom this out so you can see what I'm talking about. Here you can see that our wrapper div that surrounds our two columns is just aligned off to the left, which is the default. And what we wanna do is position it in the center. And we're gonna do that with the most common method of centering divs. I'll show you what that is. So right here we have our wrapper div and we're actually going to center it using margins. And we talked about margins in the last course on typography. And you learned that margins create external spacing around elements. And we're also gonna go into margins in depth more in the next lesson. But for now, what you need to know is that because margins can be used to create external space, we can have them set an equal amount of space on the left and right side of an element thereby centering it. So what we're gonna do is first we're gonna set the margin on the left side and we'll do that with the property margin-left. And we're gonna set that with the value of auto. Now we'll do the same thing for the right side, but the property margin-right. And we'll also set that to auto. And that auto property is gonna tell the browser to just automate the amount of margin that are on the left and right sides to an equal width. And that will center our wrapper. So let's see. All right, so now we have our centered wrapper. And there's actually a shorthand that you can use. Instead of writing out both of these margin left and margin right properties, we can just write margin: 0 auto. And what that does is the first value here of 0 says that both the top and bottom margins should be 0. And the second value of auto says, both the left and right margins should be auto. And that little snippet of code is the most common way of centering div elements and other elements like it. Okay, now that we've got our wrapper elements centered we also wanna center the header and footer content. So we have the logo in our header. And we have this little bit of text in our footer. And now that we're zoomed back in, things are gonna look a little bit cramped when I put this over on the right side of the screen. But don't worry, we're going to be fixing that in a later lesson. Now you might think that centering our header and footer content could be done in the same way that we just centered our wrapper with this little snippet of code. However, that won't actually work and the reason is our div element is a different type of element to our image and the text in our footer. The div element is something that we call a block and the image and the text are something that we call inline elements. Now the easiest way to remember what an inline element is is to think of it as referring to any kind of content that you can put in line in a body of text. So inline elements are text and anything that behaves kind of like text does by default. Now I show you how we center these two inline elements and you'll start to get an idea of the difference. So up in our section of CSS that we're using to apply to just plain elements, we're gonna add the select a header to target the header. We'll add a comma and then we'll add the selected footer. And this is going to let us target the content that's inside both of these. Now all inline elements behave like text whether they're text or not and because of that we can center these elements by using the property text align. So we'll add text-align and then we'll add the value center. And now when we save, you'll see both the header and the foot content center itself. So our logo is centered at the top and our footer text is centered at the bottom. So basically, if you have an inline element then you should use the text align property to determine its alignment. You can also set this property to right or to left. And as you would imagine, the property can apply to any text at all. So we'll just center our heading here to give an example, add the h1 selector. And now our h1 heading is also centered. But if you have block elements, text-align center will not affect them. And that's why without block elements, like our wrapper div, we need to use margins. Now if not sure whether an element is a block element or an inline element, then you can inspect the element. Go into the computed tab, and then look for the display property. So here, we see that our logo image is set to display inline, meaning it's an inline element. Our wrapper div on the other hand is set to display block, meaning it's a block element. So looking for that display property will help you decide which method you need to use to set the alignment of an element. Okay, so we've now done everything that we need to do with our site for alignment. You've seen how you can send up block elements using margins. And you've seen how you can center or otherwise align inline elements using the text align property. And you've also seen a little of the difference between a block element and an inline element. And with our columns, you saw how to set a column on the left or right side using the float property. And there is another way to do this that we haven't touched on here because it's probably just a little bit more advanced than you really wanna be thinking about right now. However, it's definitely something you should look into in your own time and that is Flexbox. Compared to using floats, Flexbox is somewhat of a newer method of controlling a line in CSS. However, it is now fairly well established and it lets you get around some of the quirks of just using floating to control layout. And these quirks are probably not something you're going to run into right away, but as you move on and you start doing more advanced layouts, it's very likely that you will run into some of the shortcomings of working with floats. So when you're ready, start having a look into Flexbox. And of course don't forget to check out Tutsplus for some excellent resources that will help you with learning along the way. All right so now our alignment is all set up and so is our sizing. But as you can see everything right now is pretty cramped and that's because we still need to set up the spacing in our layout. And that's what we're going to be doing in the next lesson. We're gonna go through how to use the margin and padding properties in your layout. And we're also gonna cover implementing borders and how you can work with the box sizing property to make controlling your layouts a lot easier. So I'll see you in the next lesson.