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

css, css-tables, html, internet-explorer-10

Solution

You need to give vertical align to top :- apply this to all ur right columns

.about_us_column{
    vertical-align: top;
}

Problem

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 have set the first `table-cell` div to `width: 35%`. It works fine in Chrome, but when it displays in IE10 (or below), the text appears below the image, or appears with a massive amount of padding. Here's the HTML of the tables: ``` <!-- 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's the key pieces of CSS: ``` 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 have tried adding `vertical-align: top;` to all of the text inside the cell, but this doesn't work. I have also tried adding `width: 50%` to both of the cells to see if this gives the text enough room to rise upwards, but it doesn't. The table-cell elements don't have a `min-height` on them either, or padding, so I'm not sure where it's getting it from. The code is live Here Here is it working fine in Chrome: Here is it not working as expected in IE10:

Original source