Two side-by-side divs set to display: table-cell, but the text in the second column falls

Question

I have a layout where I have a wrapper div and two child divs.

The parent div is set to display: table, and the child divs are set to display: table-cell.

I set the first table-celldiv to width: 35%.

It works fine in Chrome, but when it appears in IE10 (or lower), the text appears under the image or appears with a huge amount of additions.

Here's the HTML table:

<!-- Display: table div -->
<div class="about_us_row_content_wrapper boxsizing">
                            <!-- Table cell 1 with width 35% -->
                <div class="about_us_column about_us_image">
                    <img src="<?php echo $link_path . 'images/aboutus/all_devices.png'; ?>" alt="Works on all devices, such as tablets, mobiles and desktops" />
                </div>
                            <!-- Table cell 2 with assumed auto width, but text is dropping down-->
                <div class="about_us_column">
                    <h3 class="opensans_thin about_us_section_header">Polls Everywhere, No compromises</h3>
                    <p class="about_us_section_paragraph">We worked hard so that you can make and take polls anywhere, anytime - no matter which device you're using.</p>
                    <p class="about_us_section_paragraph">Our fully featured poll maker works perfectly on phones, tablets and traditional desktops.</p>
                </div>
            </div>

Here are the key CSS snippets:

div.about_us_row_content_wrapper { display: table; max-width: 990px; text-align: left; }
.boxsizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
div.about_us_row_content_wrapper img { vertical-align: top; } 
div.about_us_column { display: table-cell; }
div.about_us_image { margin-left: 50px; width: 35%; }
h3.about_us_section_header { margin: 0 0 24px 0; vertical-align: top; font-size: 1.5em; }
p.about_us_section_paragraph { vertical-align: top; }

I tried adding vertical-align: top;to all the text inside the cell, but this does not work.

I also tried adding width: 50%to both cells to see if this text gives enough room to go up, but that is not the case.

table-cell min-height, padding, , .

Chrome:

IE10 , :

Answer 1

: - ur

.about_us_column{
    vertical-align: top;
}