title: jQuery Scrollable Next/Prev Buttons Can't Be Wrapped In Other Tags
body: <p>I have a scrollable going here: <a href="http://treethink.treethink.net/portfolio/" rel="nofollow noreferrer">http://treethink.treethink.net/portfolio/</a></p>
  
  <p>I am trying to put a p tag around the 2 a tags that cause the scrollable to move back and forth but no matter what I put around the a tags it breaks the scrolling (span, div, p...They all don't work)</p>
  
  <p>How can I solve this? I assume it's something to do with the jQuery involved in the scrollable.</p>
  
  <p>Here is the code for that section of the page:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  
  &lt;div id="portfolio"&gt;
  
  &lt;div id="portfolio-main"&gt;
  
  &lt;div id="scroll"&gt;
  
  &lt;div class="scrollable"&gt;
  
  &lt;div id="thumbs"&gt;
  
  &lt;?php
     $pages = get_pages('child_of='.$post-&gt;ID.'&amp;sort_column=post_date&amp;sort_order=desc&amp;parent='.$post-&gt;ID);
  
     $i = 1;
     foreach( $pages as $page ) {
         $content = $page-&gt;post_title;
         if( empty($content) ) continue;
  
         $content = apply_filters('the_content', $content);
  
         ?&gt;
  
  &lt;div class="column" style="background: url(/wp-content/uploads/&lt;?php echo $page-&gt;post_name ?&gt;.jpg);"&gt;
  &lt;div class="desc"&gt;&lt;a href="&lt;?php echo get_page_link($page-&gt;ID) ?&gt;"&gt;&lt;h2&gt;&lt;?php echo $page-&gt;post_title ?&gt;&lt;/h2&gt;&lt;/a&gt;&lt;p&gt;&lt;?php if(get_post_meta($page-&gt;ID, "date", true)) { echo get_post_meta($page-&gt;ID, "date", true); ?&gt;&lt;br /&gt;&lt;?php } ?&gt;&lt;?php echo get_post_meta($page-&gt;ID, "desc", true); ?&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
  
  &lt;?php $i++;
  
     }    ?&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;a class="prev banner-button"&gt;prev&lt;/a&gt;
  
  &lt;a class="next banner-button"&gt;next&lt;/a&gt;
  
  &lt;/div&gt;
  
  &lt;br clear="all" /&gt;
  
  &lt;script&gt;
  
  $(function() {      
  
      $("div.scrollable").scrollable({
          size: 4,
          items: '#thumbs',  
          hoverClass: 'hover'
      }); 
  
  });
  &lt;/script&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the style I am trying to wrap it in:</p>
  
  <pre><code>#main-buttons{
      height: 30px;
      width: 560px;
      top: 460px;
      right: 0;
      position: absolute;
      z-index: 1;
      text-align: right;
  }
  </code></pre>
  
  <p>And finally, here is the jQuery file that includes the scrollable stuff: <a href="http://treethink.treethink.net/wp-content/themes/treethink/scroll/jquery.tools.min.js" rel="nofollow noreferrer">http://treethink.treethink.net/wp-content/themes/treethink/scroll/jquery.tools.min.js</a></p>
  
  <p>Thanks,
  Wade</p>