controlling content w/display: table-cell, background-color

[coolpillows]

I'm trying to create a design with borders on the left, right, top & bottom that expands fluidly with the content maintained in the center. I'm close, but not quite there:

http://www.coolpillows.com/test/test_withinnerbody.htm

If you load this page in IE or Mozilla, you'll see a whitespace showing up at the bottom above the border. I'd like the entire center to be filled with the C6E3B5 color (or variations depending on section). You can also see the tabbed-like effect I'm after by clicking on some (not all) of the links on the left nav.

Like some of us, I've learned this using some great code, but I've modified it. This example uses display: table-cell. The code also includes an "inner" div and I'm trying to give it a background color, it doesn't display the way I expect (hope?):

http://www.coolpillows.com/test/test_withcontent.htm

and another variation with the background color assigned to centrecontent:

http://www.coolpillows.com/test/test_withcontent2.htm

I've tried variations on the margin and created a separate class called 'innerbody' that's:

#innerbody{
background:#C6E3B5;
font-color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
margin-left: -15px;
margin-top: -17px;
padding-left: 30px;
padding-top: 30px;
}

[jscheuer1]

I like the second one best. Try changing the body style to this in the style sheet:


body {
background:#C6E3B5 url(images/leftborder.gif) repeat-y left top;
}What you call a class:



#innerbody{
background:#C6E3B5;
font-color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
margin-left: -15px;
margin-top: -17px;
padding-left: 30px;
padding-top: 30px;
}is actually an id. Whatever, as long as you use it as:

<div id="innerbody">

as I see you have, it will work. This would make it a true 'class':


.innerbody{
background:#C6E3B5;
font-color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
margin-left: -15px;
margin-top: -17px;
padding-left: 30px;
padding-top: 30px;
}Then you would use:

<div class="innerbody">

It all looks fairly good to me but, for some known and unknown reasons the second example just grabbed me. The third example has layout problems, I'd abandon it or bring it into line with the other two.

[coolpillows]

You did it! Or, uh, I did, with uh, your help & wisdom. Of course, I coulda' sworn I changed the body background to that color, but maybe I just didn't...who knows....

take a look....all the left-hand links work....now to build the content in!

http://www.coolpillows.com/test/test_withcontent.htm

thanks again!!!