Display Table and Overflow Hidden

Question

I am making Img hover for fun. But now I have some text in my div. I used the code:

display: table-cell;
vertical-align: middle;

to get the text beautifully centered in my div. And I also have this code:

.vertical-smallborder{
    position: relative;
    width: 217px;
    height: 350px;
    border: 5px solid white;
    outline: 1px solid #c8c8c8;
    float:left;
    display: table;

    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

    overflow: hidden;
}

I got the display: table over there for the text. If I remove that, the text would not be centered in the div.

Now I have a problem with overflow: hidden. In FireFox and IE overflow: hidden doesn't work anymore if there is a display: table.

Google Chrome and Safari both support display: table and Overflow:hidden together.

Note: It has to be pure CSS. So I cant use any javascript.

Thanks

Marc Audet · Accepted Answer · 2013-05-29 21:49:27Z

For Firefox - proof of concept

I created a demo as follows:

<div class="image-clipper">
    <img src="http://placekitten.com/400/500" style="margin: -150px 0 0 -100px;" />
    <div class="text-panel">
        <div class="text-cell">
        <h1>Overhemd<br/>24,95</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
</div>

and used the following CSS:

.image-clipper {
    width: 250px;
    height: 300px;
    border: 5px solid red;
    overflow: hidden;
    position: relative;
}
.image-clipper .text-panel {
    position: absolute;
    top: 0;
    left: 0;
    display: table;
    height: 100%;
}
.image-clipper .text-cell {
    display: table-cell;
    vertical-align: middle;
    padding: 20px; /* works okay */
    background-color: rgba(255,255,255,0.5); /* applied to entire cell */
}

and I was able to clip the image within the parent element and also position the table/table-cell as you need.

See demo: http://jsfiddle.net/audetwebdesign/JpMXP/

Postscript

I did not have time to review your style sheet in depth or to investigate the full details of how table/table-cell interacts with overflow: hidden. However, this approach seems to work and is relatively easy to understand.

emilie zawadzki · Accepted Answer · 2013-05-29 21:32:23Z

0

I advice you to delete in your css:

display: table

and give top and left properties to:

.vertical-smallborder .text

Then, if one text is longer, all will be aligned, because they have the same top start point. It will be more beauty.

answered May 29, 2013 at 21:32

emilie zawadzki

2,1372 gold badges18 silver badges31 bronze badges

1 Comment

Anders Lindén Over a year ago

You just cant delete display: table if it is needed for something, vertical centering for instance.

Collectives™ on Stack Overflow

Display Table and Overflow Hidden

2 Answers 2

For Firefox - proof of concept

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

For Firefox - proof of concept

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related