CSS Layout: 2 column fixed-fluid (again)

Question

I'm trying to setup a 2-column layout where the left area is fixed and the main content is fluid. I've seen several answers on here, which tend to work. However, there is some odd behavior when I use a "jsTree" in my "left" area and jQuery UI tabs in the main/content area.

html

<div id="main">
    <div id="left">
        <div id="tree">
        </div>
    </div>
    <div id="right">
        <ul>
            <li><a href="#a">A</a></li>
            <li><a href="#b">B</a></li>
            <li><a href="#c">C</a></li>
        </ul>
        <div id="a">
            <h3>A is here</h3>
        </div>
        <div id="b">
            <h3>B is here</h3>
        </div>
        <div id="c">
            <h3>C is here</h3>
        </div>
    </div>
</div>

css

#left {
    float: left;
    width: 200px;
    overflow: auto;
}

#right {
    margin: 0 0 0 200px;
}

javascript

$(document).ready(function() {
    $('#right').tabs();
    $('#tree').jstree({
        "plugins" : [ "json_data", "themes"],
        "json_data" : {
            "data" : [
                { 
                    "data" : "A node", 
                    "children" : [ "Child 1", "Child 2" ]
                },
                { 
                    "attr" : { "id" : "li.node.id" }, 
                    "data" : { 
                        "title" : "Long format demo", 
                        "attr" : { "href" : "#" } 
                    } 
                }
            ]
        }, 
    });
});

The problem I'm having is, as I expand the tree (on the left) the tabs on the right start getting funky. The area containing the tabs (the element I believe) grows vertically.

Take a look here for this example: http://jsfiddle.net/codecraig/gBUw2/

score 3 · Accepted Answer · answered Apr 01 '11 at 18:07

3

Josiah has it right but a better solution is to change the nature of the clear-fix technique. The .ui-helper-clearfix does this:

.ui-helper-clearfix::after {
    clear: both;
    content: '.';
    display: block;
    height: 0px;
    visibility: hidden;
}

And the problem is the clear:both. You can get the desired clearing without losing the full-width block display with this:

#right .ui-helper-clearfix {
    clear: none;
    overflow: hidden;
}

That replaces the clear:both clear-fix with an overflow:hidden clear-fix.

http://jsfiddle.net/ambiguous/BkWWW/

answered Apr 01 '11 at 18:07

mu is too short

426,620
70
833
800

So these work, but what I realize now is the content in the tabs also screws it up. So in one of the tabs I have a table (from datatables.net). – codecraig Apr 01 '11 at 18:08
Check out this example (same as before but adds the ui-clearfix + datatable): http://jsfiddle.net/codecraig/qfp5N/ – codecraig Apr 01 '11 at 18:09
I don't see any datatables in that fiddle. – mu is too short Apr 01 '11 at 18:13
That table overflows the tab panel with or without the the various `.ui-helper-clear-fix` hacks. You're going to have to fix that by ensuring that the panel is always wide enough for the table or adding something like `#a { overflow-x: scroll; }` to add a horizontal scrollbar: http://jsfiddle.net/ambiguous/FSpW6/1/ – mu is too short Apr 01 '11 at 18:22
@mu is too short - very nice! I didn't pull the source of ui.css to see what it was actually doing - and the after filter doesn't show up in my inspector. +1 – Josiah Ruddell Apr 01 '11 at 18:26
@mu-is-too-short: excellent. ok, one more thing (I think). the tree height, how do I get it to match the tabs on the right? look how the bottom node of the tree is wide (so you see the horizontal scrollbar)...I'd like the tree to be as tall as the tabbed area: [fiddle here](http://jsfiddle.net/codecraig/vSCCW/) – codecraig Apr 01 '11 at 18:30
@Josiah: The `::after` stuff shows up in the WebKit inspector (the best one IMHO) but you have to scroll around a bit to find it. – mu is too short Apr 01 '11 at 18:53
@codecraig: I think you're out of luck with that. The tree adds `white-space: nowrap;` to those elements but if you manually set that to `white-space: normal;` then the tree rendering gets all confused and ugly; you'd have to rework the tree's internals to make it multi-line aware and I don't have room in this margin for that :) – mu is too short Apr 01 '11 at 19:00
@mu-is-too-short - good to know. I agree about the best one, fire*bug* is just like it's name. – Josiah Ruddell Apr 01 '11 at 19:26

score 1 · Answer 2 · answered Apr 01 '11 at 17:46

1

The widget tabs header has a clear fix. updated fiddle. You could fix this with a non float layout, or override the css like so:

#right .ui-helper-clearfix { display: inline-block; }

This makes it so that the header does not expand the full width of the container however.

answered Apr 01 '11 at 17:46

Josiah Ruddell

29,697
8
65
67

I'd like not to use floats, but I don't/can't use a fixed layout. What do you suggest? – codecraig Apr 01 '11 at 18:03
@codecraig - I updated the layout let me know if this will work for you: [new fiddle](http://jsfiddle.net/gBUw2/6/) added a wrapper to the tabs that is also floated. This fixes the problem, but requires both containers to have set widths. – Josiah Ruddell Apr 01 '11 at 18:16
I really don't want hard set widths. Also, this still has the problem I'm seeing when one of the tabs has a "datatable" in it: [fiddle with datatable](http://jsfiddle.net/codecraig/vJA5V/) – codecraig Apr 01 '11 at 18:20

Linmic · Answer 3 · 2011-04-01T18:38:50.123

0

All you need to do is to simply tweak your css, like this:

#left {
    float: left;
    width: 23%;
    overflow: auto;
}

#right {
    float: left;
    width: 75%;
    display: block;
}

This would also fix the issue that the tabs' container don't expand full width. Though you could tune the width percentage of #right to whatever you like.

edited Apr 01 '11 at 18:38

answered Apr 01 '11 at 18:13

Linmic

761
4
12

Sorry, but applying this doesn't work. Try using the fiddle links and applying this approach. – codecraig Apr 01 '11 at 18:17
what browser do you use? using Chrome and it works at your fiddle link. though you could tweak #left's width yourself – Linmic Apr 01 '11 at 18:37
@codecraig I've tested in firefox 4, Chrome 10, IE8, 9. All work. I've forked a new link: http://jsfiddle.net/vMeYq/ – Linmic Apr 01 '11 at 18:43
I see what you're saying, however, the discussion has grown a bit. The problem moved into an issue with a "datatable" in the tabs area (see the replies from mu is too short), which the solution you provided didn't fix. – codecraig Apr 01 '11 at 18:54

CSS Layout: 2 column fixed-fluid (again)

3 Answers3

Linked