CODEWITHSUNDEEP
jquerycssjquery-uicss-floatjquery-ui-tabs
Manur
Manur

Reputation: 8773

JQuery UI tabs header too big with css floated two-column layout

I'm trying to set up JQuery UI tabs in the right column of a two-column layout powered by float: left.

The problem is: the header of the tabs gets sized to have the same height as the left column.

HTML:

<div id="zone_content">
    <div id="zone_main">
        <div id="zone_left">
            <p>Stuff</p><p>Stuff</p><p>Stuff</p><p>Stuff</p><p>Stuff</p>
        </div>
        <div id="zone_tabs">
            <ul>
                <li><a href="#tabs-1">Tab 1</a></li>
                <li><a href="#tabs-2">Another Tab</a></li>
            </ul>
            <div id="tabs-1">
                <p>blah blah blah blah</p>
            </div>
            <div id="tabs-2">
                <p>bloh bloh bloh bloh</p>
            </div>
        </div>
    </div>
</div>
<script>
    $(function() {
        $("#zone_tabs").tabs();
    });
</script>

CSS:

#zone_main {
  overflow: auto;
  width: 100%;
}
#zone_left {
  float: left;
  width: 250px;
}
#zone_tabs {
  margin-left: 250px;
}

See the jsfiddle.

I noticed it might be the same question as this one, but while the answer of adding float: left; on the #zone_tabs corrects the header height, it also push the tabs down to after the end of the left column. (It does so when the left column is large enough: 250px in the jsfiddle ; if one reduce it to 100px in both places where it's specified, the tabs find their intended place.)

So, could anyone help me, and explain me why all of this happen ?

Versions: Chrome 23 or Firefox 23, JQuery 1.8.2, JQuery UI 1.9.1

Upvotes: 1

Views: 1633

Answers (1)

Rooster
Rooster

Reputation: 10077

You can achieve the same goal by using display:inline-block; and setting percentage widths. However, now that I've edited my answer, its of note that using float negates the need to set display:inline-block, but I'm leaving the code just so both ways can be viewed.

SEE THIS JSFIDDLE

Basically, the only thing you need to watch out for in this scenario is making sure that any padding or margins inside the two divs(zone_left and zone_tabs) are also set to percentage so the view adjusts in different screen sizes.

#zone_main {
    overflow: auto;
    width: 100%;
}
#zone_left {
    display:inline-block;
    width: 30%;
    float:left;
}
#zone_tabs {
    display:inline-block;
    width:65%;
    float:left;
}

Upvotes: 1

Related Questions