The Box Model Challenge

Each element in an HTML document is represented by a rectangular box. This box can be provided with a host of properties via CSS. The most notable (and the ones we will focus on for now) include:

These properties can be visualized in Figure 1. The background property is represented by the green color.

It is very helpful to keep this image in mind when working with elements on the page, especially as positioning and alignment become increasingly important. Something that may not be immediately apparent is that when we say, "each element in the HTML document is represented by the box model," this includes elements that contain other elements. This outer element is often called a wrapper, and its children, the elements it contains, will appear in the content area shown in Figure 1.

Often we will use wrappers to help with positioning and grouping of its child elements on the page. This allows us to have discrete sections. Think header, footer, sidebar, etc. Very often this parent (wrapper) element will be the <div>.

A simple example may help clarify some this box model and wrapper business:

HTML:

CSS:

This renders to something like this.

This is a good time to mention a very special tool that’s just sitting in your browser. If you have not discovered this yet, you should know about the developer tools. When you are viewing the rendered output of the above example in your browser, right click on an area of interest (try the larger grey box) and select inspect element. A Window pane will appear at the bottom of the browser. This is FULL of useful information! On the left you can see the HTML, and on the right the correspending CSS. Hover over the HTML elements on the left, and you can see a visual representation of the properties of the element (margins, padding, etc). Click on an HTML element on the left, and the corresponding CSS will be displayed on the right. You can even edit the CSS here and see how it changes how the document renders. This works very well in Firefox and Chrome, and I have it open constantly when I am doing front-end work. I cannot stress enough how valuable this tool is, and I highly suggest you use it as we progress. Many of the examples going forward I will simply link to, and leave the inspection of it as an exersise for the reader. Further, you can find all of the code for the live examples I am linking to in this repository.

So back to the above example. The a element with the class button is a very simple example of working with the box model properties. No width and height are defined, so default to auto. This means the box will expand or contract to fit the stuff in the content area. A Background and a border is given, with some colors. Notice how the background also fills the padding area? Also note the shorthand for the border definition. There is also a curious float: left, we’ll ignore that for just a second. Our little a.button is wrapped by a div with the class call-to-action. So a.button is a child element of div.call-to-action. Notice how we have added some of our own box model properties to call-to-action, and the child elements all appear in the content section of its box model. Note the shorthand for margins here, padding is similar.

Take some time and really study this. Replicate the code on your local, and mess around with it. What happens if you add more content to the call-to-action wrapper? What happens when the content in the a tag is longer. Play with the CSS and see what variations you can come up with, and how things change.

We’ve been talking about the box model to build to the idea of positioning. Up to this point we have been dealing with what is called normal flow. Elements are laid out vertically in the same order they are in the HTML document. Sometimes this is all you need, and can work out somewhat nicely (as seen in the previous example.) However this can be pretty limiting, and we will often want more control of how things are positioned when rendered. There are a couple of scemes available to us to accomplish this, but for now we will focus on the float positioning sceme.

Consider our above example. Looks pretty good right? Nice little element centered on the page and what not. But say we want 3 call to action blocks all side by side. What to do? Well first we should add a couple more call-to-action blocks to our HTML. Something like:

Now looking at the browser we see our 3 blocks centered, one after another, down the page. If we adjust the CSS on the call-to-action element to something like:

We see something very different! The call-to-action blocks line up horizontally. Notice how the right margin of 25px spaces them apart from one another. To get things to center up again, we will need to wrap all of our call-to-action elements in a new div and perform our little margin trick. Play with these floating elements on your local for a while. Change stuff up and see how it effects the float, if at all. Here is a cleaned up version of floating three elements horizontally. Be sure to check out the code for this. There are a couple of "tricks" in there. Pay close attention to widths of wrappers containing floating elements, otherwise you risk elements wrapping (popping down to the next line.)

Floating elements can also be used in conjunction with non-floated elements. This is often used where we want normal flow content to wrap around an element. Inspect this simple example to see this in action. The fill-murray element is the only thing floated here, again note the margins used for spacing.