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

[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%;
}