I currently have a 2 column site layout, with a footer/header, a fixed width left column which contains a menu, and a right hand column which takes the rest of the available space. My lefthand column contains a fold out menu, and it seems that when I have tabs in the right hand column, the text within the selected tab only begins after the end of my lefhand menu ends.
I’ve tried using a clear:both; before tabs begin which causes the entire tabs to shift downward, and begin after the lefhand menu ends.
Here is the code I’m currently using:
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN''http://www.w3.org/TR/html4/strict.dtd'> <html> <head> <meta name='generator' content='HTML Tidy for FreeBSD (vers 1st August 2003), see www.w3.org'> <meta http-equiv='Content-Type' content='text/html; charset=us-ascii'> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'> </script> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.6/jquery-ui.min.js'> </script> <style type='text/css'> body{ margin: 0; padding: 0; } #container{ margin: 0; background-color: #FFF; } #header{ background-color: #666; border-bottom: 1px solid #333; } #header h1{ margin: 0; padding: .5em; } #nav{ float: left; width: 160px; margin-left: 10px; padding-top: 1em; } #nav p { margin-top: 0; } #content{ padding: 0; margin: 0 0 0 180px; } #footer{ clear: both; background-color: #666; padding: 1em; text-align: right; border-top: 1px solid #333; } #header, #footer { font-size: large; text-align: center; padding: 0.3em 0; } .menu { margin: 10px; height: 100px; font-size: 8pt; font-family: verdana; } .menu ul { margin: 0pt; padding: 0pt; position: relative; z-index: 500; list-style-type: none; width: 125px; } .menu li { background-color: #cccc99; float: left; } .menu li.sub { background-color: #cccc99; } .menu table { position: absolute; border-collapse: collapse; top: 0pt; left: 0pt; z-index: 100; font-size: 1em; margin-top: -1px; } .menu a, .menu a:visited { border: 1px solid #ffffff; display: block; text-decoration: none; height: 2em; line-height: 2em; width: 125px; color: #000000; padding-left: 1em; font-weight: normal; font-style: normal; font-variant: normal; text-transform: none; } .menu b { float: right; margin-right: 5px; } * html .menu a, * html .menu a:visited { width: 125px; } * html .menu a:hover { color: #ccff66; background-color: #999966; position: relative; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; } .menu li:hover { position: relative; } .menu a:active, .menu a:focus { color: #ccff66; background-color: #999966; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; } .menu li:hover > a { color: #ccff66; background-color: #999966; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; } .menu li ul { padding: 2em; visibility: hidden; position: absolute; top: -2em; left: 7em; background-color: transparent; } .menu li:hover > ul { visibility: visible; } .menu ul a:hover ul ul { visibility: hidden; } .menu ul a:hover ul a:hover ul ul { visibility: hidden; } .menu ul a:hover ul a:hover ul a:hover ul ul { visibility: hidden; } .menu ul a:hover ul { visibility: visible; } .menu ul a:hover ul a:hover ul { visibility: visible; } .menu ul a:hover ul a:hover ul a:hover ul { visibility: visible; } .menu ul a:hover ul a:hover ul a:hover ul a:hover ul { visibility: visible; } .footer { text-align: center; font-family: Arial, sans-serif; font-size: 11px; color: #CCCCCC; } .ui-wrapper { border: 1px solid #383838; } .ui-wrapper input, .ui-wrapper textarea { border: 0; } .ui-tabs-hide { display: none !important; } .ui-tabs-nav, .ui-tabs-panel { font-family: Arial, sans-serif; font-size: 13px; color: #CCCCCC; background-color: #242424; } .ui-tabs-panel a { color: #FFD100; cursor: pointer; outline: none; } .ui-tabs-nav { list-style: none; margin: 0; padding: 0 0 0 3px; } .ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */ display: block; clear: both; content: ' '; } .ui-tabs-nav li { float: left; margin: 0 0 0 2px; } .ui-tabs-nav a, .ui-tabs-nav a span { color: #FFD100; float: left; /* fixes dir=ltr problem and other quirks IE */ padding: 0 12px; } .ui-tabs-nav a { margin: 5px 0 0; /* position: relative makes opacity fail for disabled tab in IE */ padding-left: 0; background-position: 100% 0; text-decoration: none; white-space: nowrap; /* @ IE 6 */ outline: 0; /* @ Firefox, prevent dotted border after click */ } .ui-tabs-nav a:link, .ui-tabs-nav a:visited { color: white; } .ui-tabs-nav .ui-tabs-selected a { position: relative; top: 1px; z-index: 2; margin-top: 0; background-position: 100% -23px; } .ui-tabs-nav a span { padding-top: 1px; padding-right: 0; height: 20px; background-position: 0 0; line-height: 20px; } .ui-tabs-nav .ui-tabs-selected a span { color: white; font-weight: bold; padding-top: 0; height: 27px; background-position: 0 -23px; line-height: 27px; } .ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited, .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */ cursor: text; } .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active, .ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active { /* @ Opera, we need to be explicit again here now... */ cursor: pointer; } .ui-tabs-disabled { opacity: .4; filter: alpha(opacity=40); } .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { color: #000; } .ui-tabs-panel { padding: 10px; background: #242424; /* declare background color for container to avoid distorted fonts in IE while fading */ } </style> <script type='text/javascript'> $(document).ready(function() { $('#tabs > ul').tabs();} ); </script> <title></title> </head> <body> <div id='container'> <div id='header'> Header </div> <div id='nav'> <div class='menu'> <ul> <li><a href='#'>Home</a></li> <li><a href='#'>Page1</a></li> <li><a href='#'>Page2</a></li> <li><a href='#'>Page3</a></li> <li><a href='#'>Page4</a></li> <li><a href='#'>Page5</a></li> <li><a href='#'>Page6</a></li> <li><a href='#'>Page7</a></li> <li><a href='#'>Page8</a></li> <li><a href='#'>Page9</a></li> <li><a href='#'>Page10</a></li> <li><a href='#'>Page11</a></li> <li><a href='#'>Page12</a></li> </ul> </div> </div> <div id='content'> <div class='main'> <h1>Main Body Here</h1><br> <div id='tabs'> <ul> <li><a href='#one'><span>One</span></a></li> <li><a href='#two'><span>Two</span></a></li> <li><a href='#three'><span>Three</span></a></li> </ul> <div id='one'> Tab One Here </div> <div id='two'> Tab Two Here </div> <div id='three'> Tab Three Here </div> </div> </div> </div> <div id='footer' class='footer'> Footer </div> </div> </body> </html> Any help would be apperciated. Thanks.
Note: Jquery 1.3, Jquery-ui 1.6
Try this: