Lightbox, thickbox, leightbox - whatever you want to call it nowdays, the original idea behind Lokesh's "Lightbox" has been manipulated over and over and over, creating a very interactive way of presenting images, data, or movies in a stylized popup. The thing that always got to me was how heavy the initial javascript seemed to be for just creating the overlay and popup itself. I always thought, "There must be a way to do this ALL in CSS, with no initial javascript". Today I found an answer... but true CSS enthusiasts may not like it. Ready for it? I revisited using "tables". *GASP*. Yea, I know and understand what has been preached over, and over, and over again in regards to positioning via tables instead of divs. Well tough, I'll take this pure CSS table method over javascript for the time being. This article will only take you so far as creating your overlay and the centered container div to hold your data. Whatever you choose to place inside of that container, godspeed. The Core CSS: /* Line 1: */ html { height: 100%; } /* Line 2: */ body { background: #000; padding: 0; margin: 0; width: 100%; height: 100%; } /* Line 3: */ #overlay { position: absolute; top: 0px; left: 0px; background: #f00; width: 100%; height: 100%; opacity: .5; filter: alpha(opacity=50); -moz-opacity: .5} /* Line 4: */ #content_overlay { position: absolute; width: 100%; height: 100%; } /* Line 5: */ #content_overlay td { vertical-align: middle; text-align: center; } /* Line 6: */ #content { text-align: left; background: #000; color: #fff; display: inline; padding: 20px; margin: 0px auto;} The Core HTML: <body> <div id="overlay"></div> <table id="content_overlay"><tr> <td> <div id="content">hi</div> </td></tr></table> </body> Line 1: We are simply initially setting our height to 100%, so that we can stretch our table 100% in all browsers. Line 2: Typical resetting of styles being applied, again with a width/height of 100% for browser consistency. Line 3: This is our overlay - whatever color you wish to be transparent and cover your entire webpage should be applied as the background here. We are setting it's position to absolute so that it sits on top of everything, as well as stretching it 100% both in height and width to fit its container (body). The "opacity: .5; filter: alpha(opacity=50); -moz-opacity: .5" sets our transparency in all browsers. Line 4: This is where we implement our table. I know its frowned upon to use tables for 100% height, but this isn't the typical use of a table anyway. We position this absolutely as well, so that it sits on top of our #overlay div. Line 5: Lastly we confirm that whatever sits in our only TD of this table is centered both vertically and horizontally. Now we have created a overlay and container for which to plug some content into. Quickly there are two ways we could display that content. Fixed Width/Height Content If you want static dimensions of your #content div, change Line 6 to: #content { text-align: left; background: #000; color: #fff; display: block; width: 200px; height: 200px; margin: 0px auto;} Fluid Content If you want your #content div to grow with your content, keep Line 6 as it is above. Lastly, disabling scrollbars Now all of the above is fine if all of your normal page content fits in your window. However, if you are doing this "lightbox" on a larger, scrollable page, as soon as you scroll down the overlay will end. It only covers the window height/width. This is where I would add my first touch of javascript (included also is a simple script to show the lightbox). function showOverlay() { /* Line 1: */ document.getElementById("overlay").style.visibility = "visible"; /* Line 2: */ document.getElementById("content_overlay").style.visibility = "visible"; /* Line 3: */ document.getElementsByTagName("body")[0].style.overflow = "hidden"; } Line 1/2: This sets the overlay and content_overlay to visible, thus showing it over your content. Line 3: This eliminates the scrollbars, thus making the page unable to scroll when your lightbox has appeared. I hope everyone can find this article a little useful, as I tend to use alot of overlays and 100% width/heights for various items. Happy Styling!