Why is the overflow not working here?

Question

This is my css; I need this to have s scroll or auto overflow for all its content. I can't understand why it is not showing up.

.holder{
    display: table;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    top: 2.5%;
    width: 90%;
    height: 95%;
    background-image:url("images\\tile2.png");
    background-repeat:repeat;
    overflow: scroll;
}

please add relating HTML markup to your question. – adamb Mar 08 '13 at 16:45 — adamb, Mar 08 '13 at 16:45

score 1 · Accepted Answer · answered Mar 08 '13 at 16:48

1

Remove display: table; and you will see the scrollbar.

Live Example: http://jsbin.com/aloler/1/edit

Here's your code with display: table; removed: http://jsbin.com/aloler/2/

answered Mar 08 '13 at 16:48

JSuar

21,056
4
39
83

This worked thanks! Does the overflow never work in the table display or is it a combination of bad decisions that led to this? – Vlad Otrocol Mar 08 '13 at 16:50
@VladOtrocol, not sure. `display: table;` treats the element as a ``. Searching around it looks like getting scrollbars to work with tables requires some workarounds. I couldn't find an exact reason why these two are not compatible.
– JSuar Mar 08 '13 at 16:55
@VladOtrocol, there's some good info. here (including workarounds) about tables and overflow here: http://stackoverflow.com/a/4457290/1085891 – JSuar Mar 08 '13 at 16:58

Why is the overflow not working here?

1 Answers1