Display:table-cell oddity with IE8 and max-width

On this page, I’m using display:table and display:table-cell in order to get a “flex box” layout on the video and the adjacent text.

The idea is that the “description” div should flex as the width of the video in the adjacent cell increases or decreases. Its working great in all modern browsers and IE9. However, IE7 and IE8 are struggling with it. Obviously, IE 7 doesn’t recognize display:table properties, but IE8 is far off. My questions are:

  1. How can I get IE8 back inline?

  2. What’s a workaround for IE7?

.cb_video{width:947px;max-width:947px;margin:0 auto;padding:25px 0 15px 0 !important;display:table;}
.cb_video{text-align:center}
.cb_video .box{margin:0 auto;display:table-cell;vertical-align:top}
.cb_video .box.description{max-width:90%;text-align:center;float:right}
.cb_video iframe{border:1px solid #ccc;box-shadow:0 0 20px #333;border-radius:8px;padding:15px}

First, If you do not want to spend time rewriting a fallback stylesheet for IE7 I suggested using the .HTC file hack.

Second, although I don’t recommend unless the demand is statistically high enough, is to write a fall back stylesheet for IE 7 that uses floats. The main reason this is not needed is because IE 7 can be ignored.

One workaround that I know of enabling “display: table” CSS in internet explorer 7 is to have some code manually add in a table into your page. This technique will work but not perfectly, the code uses the .HTC extension and relys on a server.

Thanks for the help there.

I was able to get IE8 to play nice by dropping the max-width attribute on the .description element.