|Waiting for a sidebar widget to load…|
|Only now are the background and border complete.|
For the templates in the new Blogger template designer, we wanted everything to feel as fast as possible, even as the page loads. So, we fixed the problem. See how the border and background are in the right place even though the sidebar is incomplete:
|The page background is consistent even as the sidebar loads.|
This makes the page feel faster, since it looks more “finished” earlier in the load process. How did we do it? Boring technical explanation after the jump…
For the new templates, we use a little-known (at least to me before this whole thing started) detail in CSS to fix this with self-clearing containers. By putting “overflow: hidden” on the element that contains the sidebars, we made its height increase to contain its floated children without an explicit clearing element at the end. That way, the background and borders are in the right place during load.
Much credit goes to Mihai Parparita for cluing me in to this use of “overflow: hidden.”
(Another way to make an element grow with its floated children is to float it itself, but this leads to significant complications when trying to give it an explicit width or center it, so we couldn’t go that route here.)