Question

I’m working on an advanced database manager in PHP (essentially phpMyAdmin for dummies, giving only Administrators the ability to create tables, then admins create forms for users to input data). For most of this applications I’m more concerned with the back-end than the appearance, so I’ve been borrowing jQuery-UI to speed up coding.

As I was creating the administrative dashboard I ran into an issue. I used the default implementation of jQuery-UI tabs and the ui-tab-nav stretched itself to fill the page vertically.

I’ve traced the error to the following CSS rule of mine:

#sidebar { float:left; }

This shows the error that I’m having:

$(function() {
    $("#tabs").tabs();
});

html,body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#sidebar {
    float: left;
    height: 100%;
    width: 200px;
    margin: inherit;
    padding: inherit;
    overflow: auto;
    border-right: solid 1px #000;
}
#sidebar .menu {
    margin: 10px;
    padding: inherit;
    list-style: none;
}
.title {
    font-size: 1.5em;
    font-weight: bold;
    margin: inherit;
    padding: inherit;
}
#sidebar .menu .nav-section {
    font-size: 1.5em;
    font-weight: bold;
    border-bottom: solid 1px #000;
    margin: 20px 0;
    padding: inherit;
}
#content {
    position: relative;
    margin-left: 201px;
    /* 200px width + 1px border */
    padding: inherit;
}
#header {
    margin: inherit;
    padding: inherit;
    background: #FF9;
}
#header label {
    margin-left: 20px;
}
#myForm th {
    background-color: #999;
    border: 1px #000 solid;
}
#myForm td {
    border: 1px #000 solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div id="sidebar">
    <h2 class="title">DBManager: <em>Administrators</em></h2>
    <ul class="menu">
        <li class="nav-section">Forms</li>
        <li><a href="?form=demos">Demos</a> - <a href="?form=demos&edit=1">Edit</a></li>
        <li class="nav-section">Reports</li>
        <li><a href="?report=school-copy">School Copy</a> - <a href="?report=school-copy&edit=1">Edit</a></li>
        <li class="nav-section">Actions</li>
        <li><a href="phpMyAdmin">phpMyAdmin</a></li>
        <li><a href="?dashboard=1">Dashboard</a></li>
        <li><a href="?logout=1">Logout</a></li>
    </ul>
</div>

<div id="content">
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">First</a></li>
            <li><a href="#tabs-2">Second</a></li>
            <li><a href="#tabs-3">Third</a></li>
        </ul>
        <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
        <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
    </div>
</div>

JSFiddle Demo

With this rule commented out the jQuery-UI tabs display properly, however the entire content box is pushed below my sidebar. Options?

Answer 1

Float the #tabs div left as well: http://jsfiddle.net/UCeLf/

#tabs { float:left; }