STARIKOVS

I’m implementing a simple layout with “display table” approach at the moment. I’ve been confused a lot, when I set the width for the table it’s ignored. I have big images in layout cells with “max-width 100%”.

For instance, there is a div element with “display table” and it has 800px width, also it has two divs with “display table-cell”, each cell has a big image as a content. In Chrome everything works well but in FireFox there’s a problem the width of table is ignored. Table cannot have a width less then 800px but if you have lots of contents table will grow.

To fix this behavior use table-layout fixed:

1
2
3
4
5
6
7
8

  <div class="layout">
    <div class="layout-cell">
      Lorem ipsum...
    </div>
    <div class="layout-cell">
      <img src="big_image.jpg">
    </div>
  </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  .layout {
    display: table;
    width: 800px;
 
    /* try to remove this to test, in FF for example */
    table-layout: fixed;
  }
 
  .layout-cell {
    display: table-cell;
  }
 
  img {
    max-width: 100%;
  }

Try it here http://codepen.io/starikovs/pen/BrDKv.

Read more about CSS table-layout Property.