RobKohr RobKohr - 3 months ago 17
CSS Question

scrollable display:table-cell - not able to have fixed dimensions

I am using display:table,table-row,table-cell styles applied to some divs. One of the table-cell ones has a huge image in it. I want to set a fixed width and height for the cell, and make it scrollable so you can move around the image.

The trouble is using overflow:scroll, or even overflow:hidden, with a fixed width and height doesn't seem to force the size of the table-cell.

How can I force the div containing the image to be a fixed height/width?



.table-wrap{
display:table;
}
.table-wrap > div{
display:table-row;
}
.table-wrap > div > div{
display:table-cell;
}
#map{
width:100px;
height:100px;
overflow:scroll;
}

<div id="interface">
<div class="table-wrap">
<div id="top">
<div id="map">
<img src="http://www.planwallpaper.com/static/images/ZhGEqAP.jpg">
</div>
<div id="sidebar">
sidebar
</div>
</div>
</div>
<div class="table-wrap">
<div id="bottom">
<div class="bla">
bla
</div>
<div class="bla">
bla
</div>
<div class="bla">
bla
</div>
</div>
</div>
</div>




Answer

Because of the table algorithm that is used by CSS, you won't be able to restrict the image inside a table-cell unless you give it directly on the img element.

I think your best bet here is to use position the img as absolute and get it to look the way you want.

Snippet below:

.table-wrap {
  display: table;
  width: 100%;
}
.table-wrap > div {
  display: table-row;
}
.table-wrap > div > div {
  display: table-cell;
  border: 1px solid;
}
#map {
  width: 100px;
  height: 100px;
  overflow: auto;
  position: relative;
}
#map img {
  position: absolute;
  top: 0;
  left: 0;
}
<div id="interface">
  <div class="table-wrap">
    <div id="top">
      <div id="map">
        <img src="http://www.planwallpaper.com/static/images/ZhGEqAP.jpg">
      </div>
      <div id="sidebar">
        sidebar
      </div>
    </div>
  </div>
  <div class="table-wrap">
    <div id="bottom">
      <div class="bla">
        bla
      </div>
      <div class="bla">
        bla
      </div>
      <div class="bla">
        bla
      </div>
    </div>
  </div>
</div>

Comments