2.4 Boxes and Columns

As we saw in the last lesson, there are some mistakes that many beginners make that are a direct result of misunderstanding how the box model works. And in this lesson, I wanna talk about another common mistake that many designers make as a result of the same misunderstanding. And this particular mistake deals with columns. So, let's say that we have two columns of text that we're dealing with and you should be able to find in your project files folder, a file called columns-start.html. That's the file we're going to be starting with. And then once we're done, we'll save it as columns-end. In fact, let's go ahead and save that with a new name. So that we don't forget to do that. So I'm gonna save this as columns-end.html, and that's the file we'll end with once this lesson is over. So let's take a look at our file. We have a main content div, and we've styled that up just like we've done before, with a width of 800 and a background color of light grey, and then inside that div, we have In H2 here, and then we have two separate columns that are contained in section elements so each of them has a class of column, and then afterwards we just have this line break here to clear all of our floats so that our grey background will extend down beyond all of our content... But let's take a look at these two columns. If we were to look at this in Chrome then we can see our columns side by side and everything looks fine. Well let's take a look at how those columns are set up in CSS, we'll go back to our code and we'll see that the column class has been width of 400 pixels and it's floating to the left. So since our width is set to exactly one half of the width of its parent, and we have two of these items that are floating to the left, they will float side by side as we see here. So now we have two columns of information. Now obviously, we don't want these columns. Butting up right against each other. We want a little bit of space between those. So let's add some margin to the right of our columns. Let's say we want 20 pixels of spacing between those two columns. Well let's jump back into our code and let's do that. So for our column class, let's add another property called margin-right and we'll set it to 20px. Now before I save this and view it in the browser, can you guess what's going to go wrong with this? Well, let's save it and try it out. So, let's go back to our browser. And let's navigate to columns-end.html. Well, as you can see, we no longer have two columns. Our second column has jumped down below our first column. And that's because when we add margin to each of our columns It's going to start taking up more width than we have available to us. And since there's not enough room horizontally it's just gonna nudge this next one down to the next line. So what if we allowed for that a little bit? Since we have 20 pixels of spacing in between our two columns lets say that we reduced the width of each column by 10 pixels. So if we reduce the left one by 10 and the right one by 10 that gives us 20 pixels more space right? Well, let's try that. We'll change our width to 390 for our columns, we'll save that. But when we refresh, we see we still have the same problem. And the reason we still have that same problem is because have 20 pixels of margin after the first column. But we also have 20 pixels of margin after the second column. And if you do the math and add all of that up, that adds up to 820 pixels, which is wider than our content up here. So naturally, that second column is gonna jump down below the first one. So all we need to do now is to get rid of the margin-right for our second column. And instead of doing it that way, we'll just add a margin of right to the first one, and just leave the second one alone. So we have our column class here. I've taken out the margin-right property and I'm gonna add a new rule for column: and then first-of-type. And then we'll paste that property, margin right 20px, we'll save it, jump back into our file and refresh. And now we have two columns side by side with 20 pixels of margin in between them. Now you'll encounter this same issue if you try to add padding to one of your columns, that's also going to increase Increase the width of the column and it will cause your floated columns to jump down and stack on top of each other vertically. So you're going to have to take these items, these margins and these paddings and the border as well into account whenever your calculating the sizes for your columns. If we were to add a one pixel border around these columns, for example, it would break again. So, if we go to our column class here and add a border of 1px solid red, save our file and refresh our page. Again, that's going to break our column setup because even adding 1 pixel of border is going to Increase the width of each column, and once that width gets greater than 800, which is the width of the parent item, our second column is just gonna break down and jump below our first column. So if we're relying on this default behavior of the box model, than anytime we add padding, or boarders, or margins, We're going to have to account for that extra width whenever we size the width of the content itself. Now, later on we'll take a look at an easier way to account for this, but, again you would have to make adjustments to your calculations for the width of your content if you were relying on this default behavior of the box model. So thank you for watching and I'll see you in the next lesson.