Theming Drupal - Side by side blocks in page region

You can go far with Drupal, a Zen Subtheme, and a little CSS intuition. Sometimes it's necessary to place blocks side by side in a page region, but adding page regions isn't possible or practical, you can use the block.css file in your Zen Subtheme's CSS directory to work some magic.

My best advice to anyone designing using Drupal and Zen Subtheme is to look at the site like you would every other non-Drupal web page, everything is an element and if your brain can imagine it, it can be done.

Prerequisites: A basic understanding of Drupal and how it works, a Drupal site that you have access to installing themes and a basic text editor.

1. If you haven't already, download and install the Zen Subtheme into the themes directory and ensure that it is functioning properly

2. Copy the STARTERKIT folder from the Zen folder into the themes directory and follow the instructions in the enclosed readme.txt file for standard configuration. Let's call it myzensubtheme for this tutorial

3. Open blocks.css in the CSS folder of myzensubtheme in a text editor

4. Add the div tag to the style sheet using '#div-tag-id { }'     *if you are unsure of the name of the div tag name you can always open a page containing the block in a web browser, view source and find the opening tag containing 'div id="div-tag-id" '

5. Now add 'float: left;' to the properties of the div tag (in my case I used float left for the search block and float right for the add to any block)

6. Do this for all blocks that will be side by side

7. Don't forget to add the 'clear: ' attribute to any elements below the floating elements. For example when the search block was floating left the page title started  halfway across the page which was easily fixed by adding 'clear: both' to the properties of h1 in html-reset.css

It's important to note that this is not an answer for all situations and more of a shortcut for the times that warrant it.  I'd imagine that the best time to utilize this method is when the blocks are the first in a page region and will stay there for an extended time.  A small change in block configuration can alter the entire look of your site otherwise.

However... for the sake of arguing both sides if you believe CSS can accomplish anything and would rather control layout this way it would be an awesome way to manually control each block with limited page region changes.


I can be reached for comments, questions or ideas on twitter @Try2StopUs

Try2Stop.Us | Contact Us | Log In | Try2Stop.Us © 2011