Why Did My Layout Just Go All Wonky?

Posted Friday, November 20th, 2015 at 9:51 am

If you add Boostrap’s CSS to a layout that’s already working just fine, you may find that things shift in strange, subtle ways. And even not-so-subtle ones, like basically your entire layout breaking.

Generally, this seems to manifest as block-level elements becoming too small, and clipping out content inside their bounding boxes. A div that used to be tall enough to hold a a 40-pixel-high navigational icon suddenly cuts off the bottom half of it. The right-floating aside that used to look just right now looks oddly too-narrow — and you don’t have a screen-shot of its old appearance, but you could swear the line-breaks are in different places. Like, maybe, there’s not quite as much text on each line anymore?

You’re not going insane. The problem is that you originally built your layout using the W3C box model, where width declarations apply only to the content of a box and the padding, border and margin are all considered to be “extra”, outside that width.

And then you added bootstrap.css, which includes * {box-model: content-box;} in it.

And now your layout is using the IE Quirks-mode box model, in which width applies to the visible parts of a box, meaning the padding and border as well as the content. This is arguably much more intuitive than the W3C model, but it can also be argued that once you’re no longer sucking at your mother’s nipple, “intuitive” just means “whatever you’ve been trained to expect”.

So if you weren’t expecting to have all your boxes suddenly be measured from border to border instead of just across the content itself, then you might not consider this “intuitive”. But now, hopefully, you’ll at least recognize the problem and know how to fix it.

Of course, Bootstrap isn’t the only CSS framework that includes a box-model: content-box reset. Now that support for content-box is widespread, lots of frameworks and CSS resets are using it. Bootstrap is just the one that happened to actually cause this problem in my actual life recently. In case you were thinking this seemed like an unlikely occurrence.

This also serves as a lesson in the importance of knowing what the heck is inside the third-party libraries and tools you’re using. Just blindly including without understanding what they do (or how they do it) will lead to problems down the road. (In this case, a scant few feet down the road!) They’re kind of like abstractions that way — they have a strong tendency to leak.

Post a Comment

Your email is never shared. Required fields are marked *