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:
-
How can I get IE8 back inline?
-
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}