| To be honest, here's how I tackled that very problem last week using JavaScript to supercharge my CSS. Here's the layout challenge: There's an account settings page with a Page title, underneath that there's the user's avatar, name, and team name, and then below that we have a number of settings tabs sorted by function (general, notifications, social, funding, etc.) I wanted the avatar + names to remain center-aligned at all times, and I need this layout to work from 320px up to 1200px. What do I do? Usernames are 3 characters minimum, and 20 characters maximum. That's quite a range. So, I wrapped the Avatar and Names inside a container. Used JavaScipt to measure the container, at at page load (and any time the browser is resized) it does something like this: .avatarContainer {
position: absolute;
top: 0;
left: 50%;
margin-left: (minus half of the current width of .avatarContainer);
} Woo, okay, so now no matter how long the name is, that avatar and name will stay visually centered. So my next challenge is to find three font-sizes (as we do phone, tablet, and desktop breakpoints) that will display the name large enough that it's legible with a three-letter name, but that can still fit a 20-letter name without cutting it off. Second challenge: Automatically resize the text to 'squish' it, if the number of characters is greater than 15. So at any of my breakpoints JavaScript will also watch the element that holds the username, and if at any point that count goes higher, the font-size decreases to squish it all in. Add the two together and you've got a resilient layout that looks perfect at any size between 320px and 1200px wide, even as the user changes the dimensions of the browser or the content on the page after it has loaded. I wish I could have done that 100% in CSS but CSS makes you DECLARE things, which presupposed that you can anticipate their exact dimensions. I want to use the full power of CSS for layout after the page has loaded as the content adapts, so I needed a more clever way to define more styles and the cases during which they apply than CSS @media queries allowed. If what I'm saying is intruiguing, check out my experiments in using JavaScript to boost CSS here, maybe even suggest a few things! https://github.com/tomhodgins/alijn and http://staticresource.com/alijn/demo |