Weird tab height when using side menu.

Weird tab height when using side menu.

When using the following html5 structure - and jquery ui tabs -> the tab headers are showing as 
the same height as the side menu:

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Title goes here!</title>
  7. <link rel="stylesheet" href="style/reset.css" type="text/css" />
  8. <link rel="stylesheet" href="style/main.css" type="text/css" />
  9. <!--[if lt IE 9]>
  10. <script  src="scripts/html5shiv.min.js"></script>
  11. <![endif]-->
  12. <script src="scripts/jquery-1.10.2.min.js"></script>
  13. <link rel="stylesheet" href="style/smoothness/jquery-ui-1.10.4.min.css" type="text/css" />
  14. <script src="scripts/jquery-ui-1.10.4.min.js"></script>
  15. <script>
  16. $(function() {
  17. $("div#tabs", "div#wrapper > section").tabs();
  18. });
  19. </script>
  20.   
  21. <script type="text/javascript">
  22. $(document).ready(function() {
  23. $('nav > ul > li:has("ul")').children('a')
  24. .attr('href', '#')
  25. .click(function(){
  26. $(this).siblings('ul').slideToggle();
  27. return false;
  28. });
  29. });
  30. </script>
  31. </head>
  33. <body>
  34. <header>
  35. <h1>Main Header</h1> 
  36. </header>
  37. <nav><!-- Breadcrumbs not used! --></nav>
  38. <div id="wrapper">
  39. <!-- Main Menu -->
  40. <nav>
  41. <ul>
  42. <li><a id="Menu1" href="#">Menu Item 1</a></li>
  43. <li><a id="Menu2" href="#">Menu Item 2</a></li>
  44. <li><a id="Menu3" href="#">Menu Item 3</a></li>
  45. <li><a id="Menu4" href="#">Menu Item 4</a></li>
  46. <li>
  47.                                                 <a id="Menu5" href="#">Menu Item 5</a></li>
  48.                                                 <ul>
  49.                                                       <li><a id="SubMenu1" href="#">Sub Menu Item 1</li>
  50.                                                       <li><a id="SubMenu2" href="#">Sub Menu Item 2</li>
  51.                                                       <li><a id="SubMenu3" href="#">Sub Menu Item 3</li>
  52. </ul>
  53. </li>
  54. </ul>
  55. </nav>
  57. <!-- Main Document Content -->
  58. <section class="smoothness">
  59. <div id="tabs">
  60. <ul>
  61. <li><a href='#Tab1'>Tab 1</a></li>
  62. <li><a href='#Tab2'>Tab 2</a></li>
  63. <li><a href='#Tab3'>Tab 3</a></li>
  64. </ul>
  65. <article id="Tab1">
  66. <h1>Tab 1</h1>
  67.                                                 <article>
  68.                                                  <p>Contents of Tab 1</p>
  69.                                                 </article>
  70.                                           </article>
  71. <article id="Tab2">
  72. <h1>Tab 2</h1>
  73.                                                 <article>
  74.                                                  <p>Contents of Tab 2</p>
  75.                                                 </article>
  76.                                           </article>
  77. <article id="Tab3">
  78. <h1>Tab 3</h1>
  79.                                                 <article>
  80.                                                  <p>Contents of Tab 3</p>
  81.                                                 </article>
  82.                                           </article>
  83. </div>
  84. </section>
  85. </div>
  87. <!-- Main Document Footer -->
  88. <footer>
  89. <a href="http://www.freevirtualservers.com/" target="_blank">Website Hosted by Free Virtual Servers</a>
  90. </footer>
  91. </body>
  92. </html>

    The CSS makes sure that the footer sticks to the bottom of the page.

    Any help is appreciated (I'll try and get a live version up when possible).