Table-cell property ignores width

Question

I have set a CSS property table-cell for a div. I have also specified the width for the div and set overflow hidden, but because of the table-cell property the div does not care about the width. If I place any large image, it goes out of the width. How can I use the table-cell and use the fixed width for the div?

.right{
    display: table-cell;
    overflow: hidden !important;
    vertical-align: top;
    width: 400px;
}

Answer 1

Strange, this JSFiddle seems to work for me.

What browser are you having problems in?

Also, to force a maximum width for your table cells, use the max-width property. You can see it here, and the code is below.

HTML:

<div class='table'>
  <div class='tr'>
    <div class='right'>hey</div>
  </div>
</div>​

CSS:

.table {
    display: table;
}
.tr {
    display: table-row;
}
.right{
    display: table-cell;
    overflow: hidden !important;
    vertical-align: top;
    max-width: 400px;
    outline: 1px solid #888;
}​