Awesome CSS for centering a list item menu of unknown width: very useful for Drupal

We do Drupal. This CSS will of course work for any HTML that outputs a surrounding container (probably div) and an unordered list with floats, but you can find lots of tutorials on that around the web. From Agaric you get the straight Drupal and nothing but the Drupal (ok, not really).

If you put a menu in your footer, you're not going to see the code it directly in your page template. Instead, the footer section of your zen subtheme page.tpl.php might look like this:

  <div id="footer"><div id="footer-inner" class="region region-footer">

    <?php if ($footer_message): ?>
      <div id="footer-message"><?php print $footer_message; ?></div>
    <?php endif; ?>

    <?php print $footer; ?>

  </div></div> <!-- /#footer-inner, /#footer -->

But if you assigned a menu to your footer region through the blocks administration page (admin/build/block), it is printing out in the HTML where the $footer variable is.

We put the below in our zen subtheme layout.css. Note that we are using Menu Block to get the functionality (and much more) of setting secondary links to be derived from primary links. This leaves the secondary links free for use as footers, as in this case, and so that is the classes being printed if one views source or uses Firebug or another web element inspector.

#footer {
  margin: 0 auto;
  position: relative;
  overflow: hidden; 
}

#footer #block-menu-secondary-links .content {
  position: relative;
  width: 100%;
  overflow: hidden;
}

#footer #block-menu-secondary-links .content ul.menu {
  position: relative;
  float: left;
  left: 50%;
}

#footer #block-menu-secondary-links .content ul.menu li {
  position: relative;
  float: left;
  right: 50%;
}

Agaric tips the hat to

http://www.cssplay.co.uk/menus/centered.html