Side Panel that never exceeds the size of the main content div?

[straygoat]

I have a documentation project that is using an HTML5 output. The output has a header div, a left-side panel that contains the table of contents, a main body div, a right-side panel with images, and a footer underneath.

The table of contents that goes in the left-side panel is very long, and sometimes the content in the main body is just a paragraph or two. This means there is loads of white space as the divs are sized to match the tallest (the left-side one).

I would like to get the left-side panel to never be bigger than the main body div, and to have scroll bars if it is too small. It has to be a responsive layout.

Is it possible to achieve this without scripting? (Sorry I cant show the pages as I would be breaking the law…hope the description is adequate).

Thanks

[Paulie_D]

The table of contents that goes in the left-side panel is very long, and sometimes the content in the main body is just a paragraph or two. This means there is loads of white space as the divs are sized to match the tallest (the left-side one).

This sounds like an excellent chance to break up the table of contents into meaningful chucks and use menu/sub-menu.

Of course, it depends on what the TOC actually contains.

[straygoat]

Both good answers, but unfortunately, I can’t break up the TOC into a sub-menu as the client doesn’t like that – they like to be able to browse the entire content easily.

The overflow method is okay, except I don’t know the height of the body content – it changes depending on what the content is. There are hundreds of pages.

[straygoat]

I’d better add that I don’t have control over the TOC itself, due to how the tool populates it. All I can control is the div that contains the toc.

[straygoat]

Thanks Bearhead, that looks promising. I will give it a try.

[straygoat]

Okay, I think I’m close, but something’s not quite right. The end result I get is the triple columns, but the left column is still really tall and shows its full contents, even though it has a scrollbar. The middle and right columns are shorter and different sizes based on their content.

It will be difficult to post the full code on CodePen because of the security issues I mentioned. So I’ll try and put the important bits here and maybe you can see what I’ve missed.

The layout of my page is set with this:

<div class="bodywrap">

<div class="tricontainer">

<div class="tocmenu">
The toc menu content is in here
</div>

<div class="bodycontainer">
The body content is in here
</div>

<div class="sidebar">
The right-hand column content is in here
</div>

</div>
</div>

<div class="footercontainer">
The footer content is in here
</div>

And then the CSS for these styles is:

    div.bodywrap {
    width:100%;



    }

    div.tocmenu
    {
        max-width: 20%;
        width: 20%;
        min-width: 20%;
        float: left;
        position: relative;
        margin-right: 2%;
        margin-left: -3%;
        padding-left:1%; 
        display:table-cell;
        overflow-y:scroll;

        scrollbar-3dlight-color:whitesmoke;
        scrollbar-arrow-color:#27628c;
        scrollbar-darkshadow-color:#ffffff;
        scrollbar-shadow-color:whitesmoke;
        scrollbar-face-color:C2C1FF;
        scrollbar-track-color:whitesmoke;
        scrollbar-highlight-color:#ffffff;

        ::-webkit-scrollbar { width: 3px; height: 3px;}
        ::-webkit-scrollbar-button {  background-color: C2C1FF; }
        ::-webkit-scrollbar-track {  background-color: C2C1FF;}
        ::-webkit-scrollbar-track-piece { background-color: #ffffff;}
        ::-webkit-scrollbar-thumb { height: 50px; background-color: C2C1FF; border-radius: 3px;}
        ::-webkit-scrollbar-corner { background-color: whitesmoke;}
        ::-webkit-resizer { background-color: #whitesmoke;}



    }

    div.tricontainer {

    width:100%;
    max-width:100%;
    min-width:100%;
    display:table;
    margin:0 auto;
    table-layout:fixed;

    }





    /* desktop up to really wide screens */

    div.bodycontainer
    {

        width: 55%;
        min-width: 55%;
        max-width: 55%;
        float: left;
        display:table-cell;
    }



    div.sidebar {
    width:10%;
    max-width:10%;
    float:right;
    display:table-cell;

    }




    /* desktop up to really wide screens */







    div.footercontainer
    {
        height: 379px;
        background: none repeat scroll 0% 0% #000000;
        clear: both;
        border-top-width: 5px;
        border-top-color: #93b0c5;
        margin-left: -6%;
        margin-right: -6%;

    }

Have I missed something obvious that controls the height of the left column?

[gvinson]

I know you said not to use a script, but this is a one liner that will solve your problem. You also don’t need to use jQuery if you don’t want to.

http://codepen.io/vinsongrant/pen/XbrGzY

Another way would to set a max-height on the list item container (the UL in the example above) and add overflow scroll to that item.

[straygoat]

Thanks, I will take a look at that solution. If it is only minimal scripting, It doesn’t matter so much.

[straygoat]

Thanks Bearhead, I will give that a try too. I did wonder about the sub div. Why exactly is it required?

[straygoat]

Thanks. I don’t quite follow how the height of the table is determined. I get that position:absolute stops the parent cell of a sub-div expanding, but does that mean that the height of the table will come from the next cell (which in my case is the cell that contains the body content)?

Overflow X and Y, I’m good with.

[gvinson]

When using a table layout, the columns in a single row will all be as tall as the tallest column. A div based layout with a table display acts almost exactly like a regular html table element.

This is an actual html table example. As you can see, the columns are all as tall as the middle cell with the most content. A div based layout will also act this way.

http://codepen.io/vinsongrant/pen/WvNbJK

[straygoat]

Yes, but I don’t want that. I want the left-hand column to never be bigger than the middle column (which changes size, depending on the content that is loaded into it).

[straygoat]

Ok, I think I understand. I will give it a try today. Thanks for your help everyone.

[straygoat]

Right, I’m close, but something’s not quite right…there’s a big gap at the top of the left column. Looking at the DOM, it looks like the tocmenu div is in the right place, but the toc_content sub div appears to be approx 50% of the way down the tocmenu div.

I thought that might be caused by the widths, but it doesn’t seem to be the case. Any ideas?

Here’s the html:

<div class="bodywrap">
            <div class="tricontainer">
                <div class="tocmenu">

                    <div class="toc_content">

Menu goes here
                   </div>
                </div>
                <div class="bodycontainer">
Body content goes here
                </div>
                <div class="sidebar">
                    Sidebar content goes here
                </div>
            </div>
            footercontent goes here
        </div>
            </div>

And the CSS:

        div.bodywrap {
    width:100%;
    }


        .tricontainer{
   width:100%;
  background:white;
  display:table;
  margin:0 auto;
   table-layout: fixed;
}
.tocmenu{
  position:relative;
 background:white;
width: 20%;
  display:table-cell;
  overflow-y:scroll;
}
.toc_content{
  position:absolute;
  background:white;
  float:left;
}



.bodycontainer{
  background:white;
  display:table-cell;
  width:60%;
}
.sidebar{
  background:white;
  display:table-cell;
  width:20%;
}

[straygoat]

I only get the strange layout in IE and FireFox. Chrome seems to handle it ok. Trouble is, the company has a policy of only using IE.

[Author]

Posts