Being Smarter than the Box Model

Album Cover: In Rainbows

"Words are a sawed-off shotgun."
Radiohead / Jigsaw Falling Into Place

Posted on August 19, 2004 2:40 PM in Web Design
Warning: This blog entry was written two or more years ago. Therefore, it may contain broken links, out-dated or misleading content, or information that is just plain wrong. Please read on with caution.

If you've worked on tableless website layouts before and have tested your code in Internet Explorer and Firefox (or some other Gecko-based browser), you've doubtless run into issues with different interpretations of the Box Model.

If you've spent as many years of your life designing with HTML tables as I have, you should quickly notice that the Box Model conflicts with the axioms of table-based design. In table-based design, if you set a table cell's width to be 100 pixels and set the cell's padding to be 5 pixels, you will end up with a cell that is 100 pixels wide with a content area that is 90 pixels wide (do the math). For a long time (even up until recently) this model made the most sense to me, hence my previous grievances in Box Model Enlightenment.

However, as I do more tableless design I am becoming more accustomed to the actual Box Model as outlined by the W3C. In this model, if you set an element's width to 100 pixels and set its padding to be 5 pixels, you will end up with an element that is actually 110 pixels wide (again, do the math). Additionally, setting the element's border width to 5 pixels and its margin to 5 pixels will give you an element whose overall width is 130 pixels.

When I last touched on this topic, Gecko-based browsers supported the Box Model approach, while Internet Explorer and Opera did not. The former still does not, but it may be that the latter now does (I haven't used Opera in quite some time).

Needless to say, this leads to many annoyances when you are trying to be a good little boy and avoid using tables for layout (tables are meant for displaying tabular data only). So how does one avoid these annoyances? The good news is that there are a few approaches one can take.

The first approach (and one I've actually used on this site) is to tell Gecko-based browsers that they need to behave like Internet Explorer. You can do so by adding -moz-box-sizing: border-box; to whatever element you choose. This approach feels dirty, though, since you're basically telling an overachiever to behave like a dunce.

The second approach is to pretend you are Michael J. Fox and just start using a CSS attribute that will kick butt in the future.

However, in case you're not quite coordinated enough to handle things like hoverboards and box-sizing, there is a really simple solution that I've been using more and more as of late. It looks something like this:

XHTML

<div class="box">
 <div class="pad">
  Content here.
 </div>
</div>

CSS

.box {
 width: 100px;
}
.pad {
 padding: 5px;
}

This approach will ensure that your element (in this case a div) has a fixed width of 100 pixels and has an inner padding of 5 pixels, allowing you 90 pixels in width to store any content.

I'd take playing with the Box Model over playing with a hoverboard any day, wouldn't you? ;)

Comments

No one has added any comments.

Post Comments

If you feel like commenting on the above item, use the form below. Your email address will be used for personal contact reasons only, and will not be shown on this website.

Name:

Email Address:

Website:

Comments:

Check this box if you hate spam.