Secrets of the Site Container: Part 2
Containers are functional. Containers are necessary. Without them you’re exploring the great unknown of horizontal scrolling on a vertical page. Holding shift when you torque the mousewheel. It isn’t too much to ask to make it beautiful, though, is it?
Well, to be honest, most of the time that answer is yes. Function always comes before form, and things aren’t going to work better if you add bells and whistles. I really, truly believe that isn’t just my Pennsylvania Dutch heritage telling me that it doesn’t get better than hand-built Amish furniture. These hills are in my blood.
But we do need creativity and freedom. We need to show that we aren’t constrained. Sometimes breaking the rules just enough is proving that you knew the real rules all along. 🥃🕶🚬
What a meta, over-philosophical introduction to another blog about site containers!
Making boxes that aren’t quite in the middle
What if you want to blow out an image all the way to the side of the screen? No site container on that side. Full width. But the other side matches your margin perfectly. Something like…
It makes things easier if you consider the two ‘halves’ of your screen like this:
The right side of that image is blowing out to 50%! Dead simple. The left side is exactly half of the site container’s width. The only remaining magic is to push the block toward the side you’re locking it on with an automatic margin. Here’s the code for that.
How about a container for text, next to that image? You might be tempted to do heavy math on that. Don’t do heavy math on that.
Making things that aren’t a box
Let’s say you have a thing that isn’t a square, or doesn’t require constraining at all. That thing might not flow at the same speed as your page content. It might not even be positioned relative to it. The easy answer for that is
position itself. Which has the potential to negate a lot of the power of a site container as well.
- The default. Should work the same as
unset, so this is what you do if you have to override somebody else’s work, but you also want them to think you’re smart (read: force them to look up your solution).
- Makes everything tick. It’s a way to set the parent for all of your
- Ignores block positioning. It lets things go on top of (or underneath) other things. It refers back to most recent
position-assigned parent to determine its place. If none is available, it’s positioned on
<body>itself. It then uses
rightto determine coordinates on that element.
absoluteon crack. Ignores block positiong and parents. Almost always a terrible idea, especially for accessibility. So of course I’ve used it in a final build!
- The fun uncle. Make things stick at a certain point, but only inside of the parent. Not supported by IE, but generally it doesn’t matter – most standard uses degrade gracefully.
The centered thing.
This might be amateur hour but here’s how to center a thing that is absolutely positioned.
But did you know, for example, that padding, borders, margins all flow outside of that position?
Containers need to be relatively positioned (if they are positioned at all) to your document’s
<body>, or they will likely lose their pinpoint mathematical accuracy and throw in extra space.
Positioning other things inside of a well-built site container is fair game, as long as you know exactly how big the things are. Using default-styled things like
<h1>? You’re studdenly worrying about the default bottom margins, and the total height of the element. If something looks off optically, you can use my debugging reticle:
And then there was… nothing!
You are now a master. I can teach you nothing more. But if you wish, we may start considering the almighty
display: grid; and its infinitely complex version of the exact same things I mention above.
Grid is always fun. It is really powerful. But it also reminds me of the days when we encapsulated entire pages in tables. Let’s save that for layout decisions, menus, and other places where it’s actually needed!