From early on in styling this blog, I’ve had the sidebar on the top right, with the main blog content flowing against it, then after it ends lower in the page, below it. (You won’t notice this if your browser is very wide, as I cap the width of the main body at 50 em, but if you shrink it some you’ll see this.) Frankly, I’m surprised this is so unusual in blog and related webpage themes, which generally keep the space beneath sidebars empty, just wasting that space. (At least, when it’s not filled with ads.) This is super easy to do: in the page’s layout, have the sidebar’s markup come before the main body and give it the CSS style rule float: right. The browser will do everything from there, filling the page with the content that follows the sidebar’s markup, line wrapping when it hits the sidebar while also filling the space below it, doing a better job than most javascript-based layout renderings do.

There’s only one thing I consider a problem with this technique. In text console browsers (lynx, links, elinks, etc.), it shows the sidebar before the main content because the sidebar is in the markup earlier, which is way less friendly than if it appeared after. If I move it after the body, then it shows up better on the console, but now it’s at the bottom of the page in the graphical browsers used by all sane people, which is no good. I’ve had a soft spot for the console browsers from almost my first encounter with the web, long before I started this blog. The reasons for that is another story, but there’s no way I’m going to sacrifice the view in graphical browsers for improving the console browser experience, so I’ve kept the sidebar earlier in the markup than the main content all 15 years I’ve run this blog. And all that time I’ve felt tiny, insignificant tinges of regret for not offering a better experience for the extremely rare visitor from a console browser.

Every so often I’d think about tweaking WordPress to swap the order of the main content and the sidebar if the user-agent was a console browser, but that seemed inelegant and ugly, plus likely to be a pain with doing it in PHP, learning the appropriate WordPress internals, and likely having to carry a patch forward across WordPress versions. Or I’d think about doing it in javascript: have the sidebar be after the content in the markup so it shows up well in the console browsers that don’t execute javascript, but run a script to move it earlier in the graphical browsers that do. But then I’d have to learn javascript and DOM manipulation, which seemed like it was going to be a pain too.

Well, it turns out it is so not a pain it’s almost funny. I’m familiar with giving elements “names” with the id HTML attribute, for use in sub-page links and CSS #-references. Those names turn out to be great for getting DOM handles in javascript: just call document.getElementById("TheName"). And moving an element from where it is in the original markup to inside another element is just NewEnclosingElement.appendChild(ElementBeingMoved). Putting those together, I simply:

• Replaced the <?php get_sidebar(); ?> in the theme’s header.php file with <div id="sidebar"></div>
• Gave that element a float: right CSS rule
• Added this to the theme’s footer.php file:

  <?php get_sidebar(); ?>
  <script type="text/javascript">
  document.getElementById("sidebar").appendChild(document.getElementById("menu"))
  </script>
  

(WordPress names the <div> that encloses the sidebar “menu”. I picked the name “sidebar” for the <div> which “menu” gets moved into.)

And … that’s it. The blog now looks like I want it to in both lynx and firefox. I probably shouldn’t have waited 15 years to look into this!