I have some content that I am trying to border on all sides with images for my livejournal layout. It works fine in Firefox, but looks horrible in everything else. Part of the problem is I am using display: table to make to columns on the center equal height and that is messing with the z-index in Opera and Safari.

I want to test what is possible using negative margins on the contents of the center column and that's what his page is for.

HTML sure is confusing…

---

There are several bits of trickery going on here. Most of them are involved in getting the content to extend both above and below it's container (without manually specifying the height). The top bit is handled by positioning the element relatively. This leaves the container with 10px of space at the bottom. Covering that and getting the element to extend into the bottom is done with a fixed height footer whose contents are floated. This actually shrinks the height of the container and allows the elements to hang into the bottom. The height of the footer element is adjusted to get the positioning correct.