4.3 Modifying Layout

Throughout this course we've been working with a single document. We started with just plain text, then we added some markup. And we even divided our document into two distinct sections. We have the main content, and then we have what is supposed to be the sidebar. But of course whenever we view this in the browser, we have nothing like that. Now, we see what is supposed to be in the sidebar, as well as the main content. But the sidebar is on top of the main content. And if you'll remember, the reason why this is is because we use div elements. And div elements are block-level elements. That means that it essentially creates a block within the page. And that's very apparent now that we have added some background color to both of these sections. But now we want an actual sidebar. And so that is what we are going to do in this lesson. But I'm going to do something a little differently. I'm going to have both the editor and the browser up at the same time. The editor will be on the left and the browser will be on the right. The reason being because Brackets has a wonderful feature that allows us to edit our code and it will automatically update within the browser. Now, it's not the only editor that has this particular feature, there are many that do. But since we are using Brackets, it's worth demonstrating this feature because it is very helpful. As you are typing you can see the ramifications of whatever modifications that you're making. Now notice that whenever I click on any one of these CSS rules, on the right-hand side, we see the browser select those elements. Like for example right now, I selected the main-content. And we can see that there is a little blue border around the main content. And whenever I click on the sidebar rule, we see that the sidebar has a blue border. And it's kind of hard to see here because the background color is green. However, if we go down to the span selector, let's click on that. We see all of the span elements within the document are surrounded by a little blue border. That's because this CSS rule is for span elements. And so it is marking all of those elements that are selected with this selector. If we go to the h3 selector with a class of error, we've seen that only that h3 element is selected. We will see the same thing for the span elements that have a class of error. We have just two of those, one in the first paragraph, and then one in the third. So it's a pretty nice feature. If you wanted to see what elements are being selected by a particular CSS rule, then just put your mouse over that and you will see that. And it's supposed to do the same thing for HTML. Wherever we put our cursor, it's also supposed to select the elements in the browser. But for some reason, that is not working right now. But that's not very important, what is important is that we do what we actually want to do. And that has put our sidebar on the side of the page. So we're going to go to the CSS rule for our sidebar. That is with the pound sign for the ID, and then sidebar. We want to come in here and add a property called float. This essentially says that we want to take this element and we want to float it on either the left-hand side or the right-hand side of the element that contains our sidebar. Now if we look at the HTML, that is the body. So it's going to take our sidebar and it's going to put it on the left or the right of our body. And we get to tell it right or left, there's actually four possible values. There's inherit, there's left, there's none, and then there's right. But we want to go with left, so I'm going to choose left. And over on the right-hand side, you can see that the page automatically updated. So we can type whatever that we want to type and we can see what it would look like in the browser. So that's what it would look like if we floated it on the right, but we're going to do left. Now notice that the dimensions changed. It's no longer as long as the entire page as it was as a normal div element. So we want to change the width, and we do that with a property called simply width. Now we can come in here and we can give it an actual pixel value. So if we wanted to say that the sidebar is 150 pixels wide, then we can do that. We can also use percentages. So we can say that the sidebar is supposed to be 25% of its container, which is the body. So it's going to calculate the width of the body, and it's going to set the width of the sidebar to be 25% of that. So as we would adjust the size of the browser, we would see that the width would change for the sidebar. So let's leave this as a percentage because that's more flexible than setting an absolute pixel value. But now notice that the text within our main document just flows around our sidebar. And that might be what we want it to do. But in most cases, we want two columns. We want on the left to be a complete column for our sidebar. And then on the right to be a column that contains our content. So we will go to our main-content and we can do a couple of different things. The first thing we could do is float that on the right-hand side. Now notice that it put our content on a new line. The reason being because even though we floated it on the right-hand side, the width of the element is too much to fit next to the sidebar. So it put it onto a new line. So we could come in here and say that we want our width to be 75%. And then that would change the width of our main content enough so that it would then fit on the right side of the screen. Now that's one way that we could achieve this. We could also not use a float. So I'm going to comment this out and instead we will use something called padding. Now padding is exactly what it sounds like. We are padding an element so that its contents are inside of that padding. And we can pad all sides of an element. We can pad the top, the right, the left, and the bottom. In this case, we really just want to pad the left-hand side of the element. So we can say that the padding on the left, which is padding-left, is going to be 25%. And that puts all of the content inside of our main-contents div element over here on the right-hand side. Now the element, as you can see, is still the full size of the body. But the content, since we've added that padding to the left-hand side, is padded on the left. And now let's get rid of the background colors because that kind of ruins the effect. So the sidebar no longer has a background color. We will do the same thing for main-content. And now we will have our sidebar on the actual sidebar. Well, we do have one other document, it's that second HTML. And let's go ahead and add a link to that inside of our sidebar. So, our Home will be our index, and then the Article will be that second HTML. And for this let's go to the full size editor. And we are still going to use our unordered list and our list items. But inside of our list items, we're going to use a new element called a, it stands for anchor. And anchors can be used for a variety of reasons. But what we want to use an anchor for is what's called a hyperlink to another page. To do that, we use an href attribute inside of our a element. And that is set to whatever document that we want to navigate to. Now, our home is going to be this file, index.html. And then we will have text in between the opening and closing a tags that simply says, Home. And for the article, we will once again use an a element. The href attribute is going to be set to second.html. And then for the text of our link is going to be Article. So whenever we view this in the browser, we now have links. And if we click on any one of these, then it takes us to that page. Now notice that the second HTML page is also laid out exactly like our main page. And that is because we referenced the same CSS file. So this once again demonstrates why we would want to use an external style sheet. Because both of these documents use the same markup, the changes that we made to the CSS made it work in both of those pages. So by itself, HTML really doesn't do anything except allow us to markup our documents and give them structure. What really allows us to lay out our page is CSS. Well in the next lesson we are going to start looking at JavaScript. And we'll start at the very beginning so that you can get an understanding of some of its basics and fundamentals.