CODEWITHSUNDEEP
htmlcssinternet-explorer-10css-tables
Raphael Aleixo
Raphael Aleixo

Reputation: 607

Equally dividing 100% width table-cells within table

This is my first question here. I tried searching for a similar doubt, but I wasn't able to find anything that could explain why my code isn't working as I would like, on Internet Explorer (10+).

I've made three cell-displayed divs, all three with 100% width: I wanted to make all three to have the maximum possible width inside its parent table-displayed div (with 100% of body width). On Firefox and Chrome, everything works as planned. But IE seems to ignore this, and makes all three 100% wide.

The code is following:

HTML:

<div id="picture-holder">
    <div class="each-picture" id="picture-red">
    </div>
    <div class="each-picture" id="picture-blue">
    </div>
    <div class="each-picture"  id="picture-green">
    </div>
</div>

CSS:

.each-picture{
 display:table-cell;
 height:100%;
     width:100%;   
 overflow: hidden;
 vertical-align:middle;
 background-size:contain;
 background-repeat:no-repeat;
 background-position:center center;
 -moz-transition:width 2s;
 -webkit-transition: all .5s;
 transition: width 0.5s;
}
#picture-red{
background-color:red;
}
#picture-blue{
background-color:blue;
}
#picture-green{
background-color:green;
}

Hope this fiddle makes everything more clear: http://jsfiddle.net/AU4f5/

Thanks a lot, and sorry for any spelling/grammar mistakes. And I really hope that this question is in line with the guidelines.

Upvotes: 1

Views: 3132

Answers (1)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

You just need to remove the setting width: 100% from the div elements that you format as table cells (class each-picture). Apparently you want to divide the available width evenly to these elements, and making their container displayed as a table with table-layout: fixed does just that.

You do not need to set the widths of the inner div elements (“cells”). If you do, they should be set to width: 33.3333%. Setting their width to 100% asks the browser to give each of them 100% of the total width of the table. This is of course impossible. Different browsers handle this differently.

Upvotes: 3

Related Questions