For the Legal Research page, created a custom page template (legalResearch.php) based on the default page template. I wanted this page to be full width. Although get_sidebar is removed from legalResearch.php, the main content does not fill the entire screen width by default. Without more, a blank space is left where the side bar would be.
For the main content area to extend the full length of the screen, the <body> tag must have the “full-width” class. Wrote a custom function in the template to filter the body_classes() function to add the “full-width” class when using the legalResearch.php template. See the “Add Classes By Filters” section of the body_class() reference.
I wanted to append other content to the page, depending on which section the user clicked in the summary table. The template contains a filter to do that. For this to work, the appended content must be a child of the page and the id of the page must be posted via GET: http://www.glenpritchard.com/ohiolegalresearch/?id=1647
if the id is not a child page, nothing will be appended. Passing id=shebang will append all of the child pages in the menu order.
Finally, I replaced the table for the top grid to divs. The problem is that floated divs do not have the same height as its neighbor in the same row. The solution is to use display:table and display:table-cell as described in this nice post. This change was essential for maintaining a responsive web design.