Once again I am faced with my favorite HTML/CSS dilemma and am feeling frustrated. Seeking advice from the experts on SO this time around to solve my problem. Here it is...
Imagine you want to create a slideshow in a browser. The requirements are simple:
- The slide content should be wrapped within a slide frame.
- The slide frame should be centered both horizontally and vertically within the browser viewport.
- The slide frame must not extend beyond the browser viewport.
- If the slide content overflows beyond the slide frame (which has expanded to fill the entire viewport), scroll bars should appear.
One important point is that the viewport itself should never require scroll bars.
I am aiming to implement { margin: auto auto; } for my slide. The closest representation I could come up with in HTML/CSS is as follows:
<style>
html, body {
margin: 0;
overflow: hidden;
padding: 0;
height: 100%;
width: 100%;
}
#f0 {
bottom: 2em;
left: 2em;
position: absolute;
right: 2em;
top: 2em;
}
#d0 {
height: 100%;
}
#c0 {
height: 100%;
position: relative;
width: 50%;
}
#d1 {
height: 100%;
position: absolute;
right: 0;
}
#c1 {
height: 100%;
overflow: auto;
position: relative;
left: 50%;
}
#d2 {
background: yellow;
}
</style>
<body>
<div id="f0">
<div id="d0">
<div id="c0">
<div id="d1">
<div id="c1">
<table height="100%" cellpadding=0 cellspacing=0>
<tr><td id="td" align="Left">
<div id="d2">
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum... Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
</div>
</td></tr>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
You can also find this code here: http://jsfiddle.net/qmEYU/9/
This code uses several positioning techniques. It results in a centered slide that adjusts dynamically as the viewport changes. When the viewport shrinks, the slide shows a scrollbar.
However, this setup comes with its own set of challenges:
- To position the scrollbar (which actually confines the TABLE and not the #d2) next to the (yellow) slide, I had to use table.width=auto. To center the now narrow table, I resorted to using the 50% trick. But this limits the available total width to the centered element to only 50% of the viewport.
- I cannot place a border around the slide. This is because the "slide" is more of an illusion: the slide content (#d2) is inside a TD which is centered within the TABLE. As #d2 expands, the TD will adjust, causing the bottom border to spill into the overflow. Adding a border around #c1, the scrollbar container, means if the slide content collapses, the border will show around the TABLE instead.
- I need to position buttons below the slide that should always be visible, regardless of slide content. Since I cannot distinguish any element as THE SLIDE, I face challenges while placing the buttons.
I came up with a JavaScript solution but it's not optimal due to cross-browser compatibility issues. I'm seeking alternative CSS-based solutions here.
Thank you for your assistance.