How to design in the box model of your choice · 9 June 2007, 13:12

If you’re a webdeveloper responsible for the HTML of the website you’re creating, in between browser-rants, you might’ve asked yourself whether you can choose which box model to develop in, in ways that are cross-browser compliant.

The content-box model’s issues

The content-box model – that’s the one decided upon by the W3C – slays fluid webdesign. If you like to work with percentage-widths, forget about it being simple.

Consider the following setup: you have a 30% column on the left of the screen and a 70% column on the right of the screen. Now, what happens if you add padding to latter column? It exceeds its available space and – depending on how you implemented the two columns – either creates an ugly vertical scrollbar, or falls out of place, settling somewhere under your first column.

But I could just make it 25% and 65%, no?

No.

You want a truly fluid website. Not only does your website break if your padding exceeds the 10% buffer space you created in that hypothetical situation, but the distance between your two columns fluctuates from resolution to resolution (or between window-resizes). If you want a fixed width between the two columns – and you probably do – you lose.

If this was all the standards allowed for, fluid designs would be history. There would literally be no way to create percentage-based layouts (with padding) without aid from other, independant languages such as JavaScript / JScript.

width: auto

Fortunately, there is leeway. The second box-model used by standards-compliant browsers is the margin-box model. In non-floated boxes – and for FireFox, in floated boxes, too – without a width declaration, or with width:auto, all browsers agree that the box in question is 100% wide per margin-box model.

This is utterly heaven sent. This allows you to fix everything the content-box model breaks… and more. But first, let’s see what the W3C has to offer to make our lives easier:

box-sizing, box-width & box-height

Above link retrieved on the 9th of June, 2007.

I’m a proponent of box-sizing – and its rapid adoption by Opera (as box-sizing) and FireFox (as -moz-box-sizing for now) tells me that there are more people out there who deem it worthy of attention. However, the W3C:

The property ‘box-sizing’ was first proposed to provide an upgrade path for certain browsers that interpreted ‘width’ the wrong way. ‘Box-width’ and ‘box-height’ are proposed as improved versions of ‘box-sizing’. However, newer versions of those browsers have already fixed the bug and it is not clear that these properties are really needed anymore.

The draft currently continues with musings about a :container element for more control, which has the potential to greatness. But as it is, I won’t hold my breath – after all, it was initially “proposed to provide an upgrade path“, rather than “proposed to make webdeveloping multitudes easier“, and I fear that this implies that they still don’t see a webdesigning benefit in other box models.

For the sake of completion: box-sizing allows for the values border-box and content-box. -moz-box-sizing (and thus, FireFox) additionally allows for padding-box.

Compatability note: While Internet Explorer doesn’t support box-sizing, it continues to support doctype switching, so unless you’re aiming for the padding-box model of FireFox‘s (which is specific to FF, anyway), you’re good to go in three major browsers.

Compatability note: Unfortunately, Safari doesn’t support this. This means that for commercial websites, box-sizing is not currently an option.

So, what is an option?

The :container solution, today

By combining the margin-box model at 100% – achieved by using width:auto; – and the content-box model without restriction, you can emulate all other box models. This is not very elegant, as it requires two block elements – instead of one – per box, but it works, and it works in all standards-compliant browsers (or browser modes).

The structure should be as follows:

The outer box defines the width according to your box-model of choice. The inner box is the width:auto box, and should never ever be given any other width. This is where you declare everything in margin, padding or border that should not affect the space your box takes up. In turn, any of those attributes defined on the outer box will affect the space your box takes up.

I’ve created a test page on the box-model container trick, for the curious.

Hopefully, this will help those of you who’ve been despairing over how to design with percentages.

— Neike Taika-Tessaro

---

Comment

Textile Help
Categories: css, development, html
Related:

Apache & PHP: Headache with POST / GET · 10 December 2011, 01:43

JavaScript and CSS Block Encoding: Broken by design · 1 September 2010, 13:44

Extending phpDocumentor with custom tags · 23 October 2009, 18:36

mIRC Script: Opping yourself in all channels in a single go · 14 December 2008, 20:48

mIRC Script: Flexible moderation · 14 December 2008, 20:27