CSS Guide Part 8: The Box Model and Clear Tags

In this eighth part of our CSS guide, we get to constructing a full site design by utilizing the box model and using clear tags.

In the previous part of our guide, we talked about divs, classes, and Ids. Now that we explained how that work, the next logical step is to show you how to build the infrastructure of the site. A great way to construct a full site is through what is known as the “Box Model”.

Making a Box in CSS

As the “Box Model” concept implies, this involves making boxes in CSS. These boxes frequently contain the content of the website to help visually break content apart, while at the same time, organizing it in a nice easy to read manner. First, let’s create a simple box with a nice light grey background so we can see it for ourselves.

First, I’m going to start with a simple HTML page with a demo heading and some demo paragraphs:

Here’s some CSS I’ve thrown in for a little formatting. In this case, the formatting really isn’t all that necessary, but I added it in anyway:

The resulting page with this code looks like this for me:

Some CSS action, sure, but not a lot going on. So, how do I put in a box? Via our old friend, the div tag. I’m going to wrap all that text (header included) into one giant div tag and call it “container” like so:

Next, I’m going to simply format this box. If you’ve followed the previous guide parts, especially the tables and backgrounds parts, this next set of formatting is actually more like a review of what you already know:

… the results of all of this is:

Sweet! Our very first box! It kind of behaves like a single cell table, but without all that HTML code that a table requires. All this through the power of a single div tag. Pretty neat, eh?

The Box Model

OK, so now that we know how to create boxes, the next step is to create the box model, right? Well, all the box model is is just a series of boxes to contain all of your content. While you might find yourself thinking that this is all very easy, you might be surprised how finicky it is to have multiple boxes in one screen. For this next part of the tutorial part, we’re going to demonstrate building a full fledged website design using these boxes. This will involve a website with a header, three panels, and a footer.

The Wrapper

The first step I’m going to take is make a “wrapper”. I am a big fan of a wrapper class because it can easily contain all the content on your website. You don’t have to worry about different boxes suddenly popping out of place (unless, of course, you are one of those coders who use some advanced CSS of course). If I want to increase the width of the whole site, decrease it, centre it, etc., all I have to do is modify the wrapper div to make it all happen. It will, of course, be invisible as it provides a function instead of a visual effect. So, I first insert it into my HTML in the same location as the content div I made earlier:

Next up, I’m going to add some simple formatting. How do I want the website to be positioned on screen? Will it take up all or just most of the screen’s width? All this will be added into the wrapper class in my CSS file:

This won’t change much in terms of how the site will look right away, but if you want to make sure your wrapper works, simply give it a background. Does the background colour go behind everything on the site? Good. That’s how you know it’s working.

The Header

Next up, I’m going to add a box for my header. Within your wrapper text, you’ll want to figure out where your header will go. Naturally, it’s at the top, right? OK, let’s insert our header class into our HTML:

Next, we are going to format this box. How wide do we want it? Well, we want it to go all the way across the top of the page. If I want to add in a menu, a navigation bar, a banner logo, or whatever else I want, I want it to fill the top of the page. So, I’m going to format it accordingly. I’m also adding in a background just so it’ll be easier for you to see where I’m placing my boxes:

The end results is this:

Some of you might be thinking, “wait, you typed in 100% for the width, yet the width matches the width of the text. How does that work?”

Well, very simply put, your header is contained within the wrapper. So, when you insert a width of 100%, in this case, you are actually telling the browser it is 100% of the width within the wrapper class (which is currently set at 95% width). Pretty sneaking I’d say.

The Left Panel

Next up, we are going to go to the next line. This part contains three boxes. Two panels and a content portion in the middle. This is where a little math comes in if you are going to a non-fixed width (like I am here). What adds up to 100%? How about 10% plus 80% plus 10%. We don’t know if that will visually work out, but the good news is that we can tweak the numbers after we get a good idea of what the site will look like.

OK, first, lets add the left panel into our HTML:

Next up, I’m going to add some simple formatting to my left panel:

OK, another box made! Easy! Let’s take a look at the end results:

Oh my. That’s not supposed to happen! The left panel just shoved everything else down below it. What’s worse is that it let a bunch of white space. We have every intention of filling that space, though!

Well, remember back in the images part of our guide? We ran into a very similar problem there where text wasn’t wrapping around that picture. Believe it or not, the solution is the same thing: float: left;. Let’s add that into our CSS:

Well, did that work? Let’s take a look:

Alright! We fixed our first CSS bug! OK, on to the next box!

The Middle Panel

Same idea as before, only this time, we are wrapping it all around the main content of our site. This includes the header and body text:

Next, we can add our styling (remembering the float left CSS rule of course!):

Yes, our CSS if starting to get a little long, but when you are programming an entire site, this is probably going to happen. Now, the final results:

Alright! One more panel down!

The Right Panel

Now, let’s add our last panel in the site:

Next, we’re going to sound like a broken record and add our formatted CSS:

… and we should have a nice complete…

… what? Why is the right panel moved to the bottom? The answer, of course, is that your content is too wide. That very likely going to sound confusing because 80 plus 10 plus 10 equals 100%. Well, look closer at the CSS.

You’ll notice that I’ve added a padding of 3px. Believe it or not, that actually contributes to the overall width of all of your boxes. Naturally, anything above 100% means you exceed your limits. The end result is that the box moves to the bottom simply because it has nowhere else to fit itself.

Now, we want the ability to add padding to our boxes. That’s just a given. How do we do this without adding width to our three panels? There may be a number of ways to handle it, but one way of handling this is to wrap your content in their own separate div tags. They don’t have to be all different, though. In fact, I’m going to wrap everything in the same class div tag. This is how I did it:

The content in the panels gets wrapped in a “contentwrapper” class div tag. They can all be the same. If I really want, I can customize all of them and have their own separate classes, but for now, everything had a padding of 3 pixels, so one will do for all three.

Next, I’m going to go into my CSS and delete the padding for all three panels. That will fix the current alignment bug. After that, I’m going to create my “contentwrapper” class and insert my padding separately:

The end results:

Voila! Not only do my panels line up correctly, but I’ve also given everything 3 pixels of padding in the process. All this without hurting the integrity of a flexible website (retaining those width percentages). I’m not saying this is the only solution in this situation, but it is one solution. Yeah, those boxes can be tricky to manipulate at times, but it is possible to make them cooperate!

OK, let’s move on to the next step.

The Clear Tag

We’re going to want to go to the footer next, but there is one very important thing to know at this stage. Remember when we floated all of our panels to the left? Well, there is one small problem with all of this: it can cause seemingly unknown bugs to pop up in our site further down.

So, when we go to another line of boxes, we have to ask ourselves, “did we use floats in that line?” If the answer is yes, then we have to do something known as clearing our floats. When we clear our floats, it resets everything nicely moving onto the next line.

So, let’s first insert our clear div class tag. Of course, you’ll immediately want to close it (hence the close tag right after on the same line):

Now, we need to add our class to the CSS. For this, I simply use .clear { clear: both; }. This will basically be a catch-all tag. No matter where I put it, it’ll clear all of our floats. This permits me to use it over and over again. This is what it looks like in my CSS:

There we go! It won’t change the look of our site at this point, but we’ve set ourselves up nicely for making our footer now.

The Footer

Luckily, the footer will be very easy to put together. It’s basically just like the header, only it’ll live on the bottom of our page. First, the HTML:

Remember, we want to keep this within the wrapper tag, so it goes before the last closing div tag.

After that, we’re going to add in our CSS:

You’ll notice that I didn’t just randomly throw this at the end. This is because I’m trying to keep the rules in a logical order. As my CSS files get bigger, I’ll want to start putting things in a logical order. In this case, the order is the wrapper, header, left panel, middle panel, right panel, and footer. The clear tag is being left at the bottom so it’ll also be easy to find if I need to take a look at it. The computer can read this CSS just fine, but you’ll probably want to make this process as easy as possible on yourself as well if you wish to go back and start editing.

Now, let’s look at the final product:

Now that’s a fine basic design! I got my header, left panel, middle panel, right panel, and footer. The heights of all the boxes will grow as more content gets placed within those boxes.

In my personal opinion, the left and right panels might be a bit narrow and the text in the middle panel might be a bit big for the site. Naturally, this can always be tweaked of course. Still, we have our basic website design up and running now. Taking what we’ve learned already in previous parts, we can start adding what we like until we’ve created our next big masterpiece!

Congratulations! You now can design a basic website with CSS using the box model and clear tags!

< Divs, Classes, and IDs | CSS Index | Comments and Final Thoughts >