CODEWITHSUNDEEP
htmlcssoverflowvertical-alignment
Dennis Betman
Dennis Betman

Reputation: 330

Display Table and Overflow Hidden

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

Upvotes: 3

Views: 11191

Answers (2)

Marc Audet
Marc Audet

Reputation: 46825

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.

Upvotes: 7

emilie zawadzki
emilie zawadzki

Reputation: 2127

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.

Upvotes: 0

Related Questions