controlling content w/display: table-cell

[lrsachs]

I'm working with some code that I found and modified, learning along the way. This example uses display: table-cell and presents borders on all sides, expandable. The code includes an "inner" div and I'm trying to give it a background color, it doesn't display the way I expect.

http://www.coolpillows.com/test/test_withcontent.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;
}


but inner, I suspect is causing the problems.

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

The other thing, which I don't fully understand is the display: table-cell; selector.

#centrecontent {
display:table-cell;
}


This is what happens when you try to take someone else's code and use it for your own purposes. :-(

One last thing, ignore the image on the top of the left nav; that's going to link back home & will make more sense

when I change the image. BTW, you can probably see where I'm headed with the left nav colors & the body matching so it's sort of a tabbed look for each level.

Thanks in advance!

-lee

[ronaldb66]

First of all, although the possibilities are very promising, table display values are unsupported by IE so I would advice against using them for the time being.
For the innerbody id (it's not a class!), I couldn't find an element with id="innerbody", so any properties set with that rule won't effect anything.

Rather then reusing someone else's markup and styles, why don't you explain what you want to accomplish, starting with the right page structure? I'm sure we can help you out.

[lrsachs]

Ronald -

While table-display values may not be supported in IE, I'm not sure that's what's creating my problem. In fact, the same problem occurs in IE or Mozilla. I haven't looked in NS.

But the thing I'm after is basically this:

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

Click on the left nav for "business" "personal" & "creative" to see what I'm after (the others are disabled). It's sort of a tabbed effect if you catch my drift, nothing terribly fancy.

Also, if you resize any window, you'll start to see the white show up above the bottom border. The goal is borders filling the top, left, right & bottom borders no matter what the user does to resize the window. And, of course, the inner body flows with the borders and fills the gap no matter what.

Those pages were done w/the innerbody ID. There's also a version I did w/out using innerbody & only "inner." You can see that here.

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

This works fine, but I still have the white showing up on the bottom no matter what size the margin. I can throw a bunch of <p>'s in, but we all know that's SO un-CSS.

thanks again for helping out....

[lrsachs]

BTW, I did a version that has C6E3B5 in centrecontent ID

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

Also still shows whitespace in IE + the borders getting blown away. hmm