The Box Model - Managing "Mantle Width" and "Core Width"

At the core of every CE3 layout is the box model. And if you can wrap your head around how the box model works, then you shouldn't have any problems creating a layout.

The page is a box. And every block-level element on the page – the page container, the masthead, the navigation, the block, the grid, the social networking area, the footer – is a box within a box.

Remember your geography classes: the Mantle is the outer box, and the Core is the inner box.

The Mantle may occupy the full width of the page, or not. Background color and borders are set on the Mantle.

The Core may occupy the full width of the Mantle, or not. The Core holds in your content.

In our box model, we need only concern ourselves with box widths. The heights of boxes will be determined automatically by the content within. The box height will always expand as a function of our width to accommodate our content.

This will be easier to grasp with some visual examples, and easier still when you start pushing sliders around for yourself. For the sake of explanation, though, examples follow.

The gray area is our page. The white area is our mantle. And the area covered by text is our core.

In this example, observe the following facts:

The Mantle does not occupy the full width of the page.

The Core does not occupy the full width of the Mantle (we know this between of the excess whitespace on the left and right sides of our text.

In this example, both our Mantle and Core are set at “fixed” widths:

In the next step, let's set the Core width to “auto”.

The effect of this change is that our Core will now occupy the full width of the Mantle. Let us observe:

As expected, the text now completely fills the width of the Mantle, because our Core now occupies the full Mantle width. Notice also that because our content now has more width, less height is necessary; our content area has automatically reduced its height in compensation.

We've achieved this effect by setting our Core width to “auto”; we can achieve the same visual effect by setting Core width “fixed” with a value equal to that of the Mantle, in this case 1140:

Now, it's not good reading having our text content slammed against the edge of our box. To solve this, we can either use a fixed Core width that is slightly smaller than our Mantle's width, or we can set Core to “auto” and use our Padding sliders to create some breathing space for our content.

Now let's set our Mantle width to “auto” and observe the result:

As you can see, our Mantle now occupies the full with of our page. And because our Core is also set to “auto”, it continues to occupy the full width of the Mantle. As a result, our text is now uncomfortably wide to read.

We can remedy this situation by setting our Core width to a “fixed” value:

Our Mantle continues to occupy the full width of our page, but our Core and its content are now nicely constrained at a width that is much easier to read.

At this point you should have a good understanding of how the box model works. Our examples have used the block and textual content to illustrate our points, but the same principles apply to the masthead, navigation, the gallery thumbnail grid, etc.

Thus armed with understanding, you should be able to manage page layouts with ease. If not, then just spend some hands-on time with the width, margin and padding sliders and you'll be at ease quickly enough.