3.4 The Necessity of Divs

If I open my CSS folder, and we go to style.css, there is something called margins that allow us to add some spacing. So let's imagine within our H1 element, I want to provide some margin left. Now I could add it right here, and that would be fine. And you know what, some developers do prefer that. In my case, I've found that it's not best for me. I prefer to have each property on its own line. It's easier for my eyes to absorb, but you can decide for yourself. Anyhow, so let's say I want to provide some margin left, and let's say we want to do 50 and there's a unit of measurement that's very common for websites and that's called pixels. You will quickly become acquainted with them, but there are some other options as well, such as percentages and ems. For now, we'll stick with pixels. Notice again, my property name is margin left, then a colon, then the value is 50 px and then we end it with a semicolon. Let's come back and load the page, and now can you see that we've added some spacing. We've added a bit of margin on the left side of the heading one tag. But now, if we want some room all around, notice this right here is up against the edge. It sounds like we need to add some to that as well. Let's come back to HTML, and it seems that with the paragraph tag we should add the same thing. So now I'm going to reference all paragraph elements, and then I'm going to type the exact same thing. Now if we load the page, this one is working but again, the image element isn't working either. And this is starting to get really sloppy, once again. How can we clean this up? Well there's a couple options. One, we can simply group these together. So notice how the H1 is referencing it and the P is referencing it. We can specify multiple elements by using a comma within our selector. So I'm going to remove this, and now I will say, get all heading one elements, and using a comma, get all P elements and apply margin left. If I load the page, we're getting the exact same effect, but we've cleaned it up a good bit. Still though, if we want to do the same thing for the image, we'd have to do comma image. Reload the page, and now that's working, but we have another problem. We would have to do this for every single element on the page. And when we are referencing it like so, what if you have a image later in your document that you don't want to receive all of this margin? This is a bad practice. Instead, it's customary to wrap related material within something called a div or there are other choices as well. In this case, we will use a div. Wrap everything we want to include within a div, and then I will indent it. So I want you to think of divs as a way to position your content. They do not describe your content. They do not style your content. They simply allow you to position it much more efficiently. I'll explain this a little bit more shortly, but now let's come back and say, div. Reload the page. And notice we're getting the exact same effect. And that's because rather than the manual and saying get the H1, then get the paragraph, then get the element, we're saying get this entire bucket. Get this entire container, and provide some spacing around it. And that's how I want you to think of divs-- as buckets. When you wrap elements, any number of elements within a div or a bucket, you're saying, I'm going to put all of this stuff within this bucket. That way I can easily move it around when I need to, and I don't have to pick up each element or each toy or each item one at a time. I just pick up the bucket and move it around or position it however I need to. This is the only purpose of a div, to assist you with positioning or styling your content. Again, it has no semantic value. It has no specific stylistic value. It's just a bucket, but you'll find you'll use it quite a bit. For example, if we go back to net tuts, you'll notice that the entire-- if I zoom out-- our entire website seems to be positioned in the very middle, and that is because this entire main section is wrapped within a div. And then we can say, get that parent div and make sure that the spacing on the left and the spacing on the right is the exact same value. Let's see how we could do that on our project. We have a wrapping div, and now again, I'm going to be very generalized. Remember, when I say this I'm not saying get just this first div, you are saying select every single div on the page. You'll get to the point where you need to be more specific, but for now we don't need to. Now if I set margin to auto, we're telling the browser to automatically determine what the margins should be. Next, I'm going to specify a width for our divs. I'm going to say width of 500 pixels. Now let's see what that does. I load the page. Notice it moved it to the middle. So this might be a little more understandable if we first add a background color of red. Now you can see that we've created a bucket, or a container, that's 500 pixels high. The height, because it has not been explicitly stated here, will be determined by the height of all of the content within the bucket. Now when we add margin, auto, we are saying, I want you to make the margin left and the margin right of this div identical, the exact same width. And the only way that's possible is if this is perfectly centered on the page. That way, the spacing on the left will be 400 pixels or so and the spacing on the right will have to be the exact same value. I'll refresh, and now we're getting the same effect. And this is something you'll do quite often when building maybe your first website is you will create a wrapping container, and then you will center it on the page. So already we're getting the glimpse of how you would build an actual website. Good job. Once again though, within this div, we had a new section. And we'll give this a heading two, My New Section. Remember you would only wrap this new section within a div if you had a reason to. Just don't do it by default, always adding divs. This is what's known as div-itis, too many divs when you don't need to. We're going to accept that we need it for this case. Now watch what happens. Refresh, and now we are styling every div. You can see this more clearly if I were to say text align. Get the text and align it to the center, refresh. Notice it's being applied to this as well. So if you want to only reference a parent div, we need a way to identify it, and you'll learn that in the next episode.