CSS only lightbox solution - css

Question

I am working on a CSS only lightbox solution for my project. I've googled it but so far found only partial solutions.
I am looking for these features:
display content of any width and any height (no fixed height/width)
center verticaly and horizontaly
display scrollbars if content width and/or height overflows lightbox boundary due to viewport dimensions.
So far I have this:
.lb-overlay {
text-align: center;
background: #c0c0c0;
background: rgba(0,0,0,0.5);
border: #a0a0a0 solid 1px;
position: fixed;
left: 0;
top: 0; right: 0; bottom: 0;
z-index: 10000;
}
.lb-overlay:after {
content: '';
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
background-color: #f00;
}
.lb-wrap {
display: inline-block;
vertical-align: middle;
position: relative;
background: #ffffff;
max-height: 90%;
max-width: 90%;
z-index: 10001;
-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.25);
-moz-box-shadow: 0 0 8px rgba(0,0,0,0.25);
box-shadow: 0 0 8px rgba(0,0,0,0.25);
}
.lb-content {
position: relative;
overflow: auto;
margin: 2em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.lb-close {
position: absolute; right: 0; top: 0;
background-color: #d00000;
margin: 0;
color: #fff;
padding: 4px;
line-height: 1em;
width: 2em;
height: 2em;
border: 0;
outline: 0;
cursor: pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.lb-close:hover { background-color: #f00000; }
http://jsfiddle.net/TomasReichmann/F4D5u/1/
problems:
vertical scrollbar doesn't appear
horizontal scrollbar works only in chrome
Ideally, I am looking for compatibility with modern browsers and IE8+, but I can live with IE9+
Can you guys help?

Answer 1

Get rid of the unnecessary sizing models
Full-size the overlay as width: 100%; height: 100%;
Use margin: auto and position: absolute; top: 0; left: 0; bottom: 0; right: 0; to center align the wrap within the overlay both vertically and horizontally
Use width and height instead of max-width and max-height
Use padding on wrap to control the border around the content
Use overflow: auto; width: 100%; height: 100%; in content
Summed up: http://jsfiddle.net/F4D5u/8/
Complete style code:
.lb-overlay {
background: #c0c0c0;
background: rgba(0,0,0,0.5);
position: fixed;
left: 0; top: 0; right: 0; bottom: 0;
z-index: 10000;
margin: 0;
width: 100%; height: 100%;
}
.lb-wrap {
margin: auto;
position: absolute; top: 0; left: 0; bottom: 0; right: 0;
background: #ffffff;
width: 70%; height: 70%;
padding : 2em;
-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.25);
-moz-box-shadow: 0 0 8px rgba(0,0,0,0.25);
box-shadow: 0 0 8px rgba(0,0,0,0.25);
}
.lb-content {
overflow: auto;
width: 100%; height: 100%;
}
.lb-close {
position: absolute; right: 0px; top: 0px;
background-color: #d00000;
margin: 0;
color: #fff;
padding: 4px;
line-height: 1em;
width: 2em;
height: 2em;
border: 0;
outline: 0;
cursor: pointer;
}
.lb-close:hover { background-color: #f00000; }