fixed size div surrounded by expanding divs

question about a tricky css problem

[theintz]

I am working on a website and the client wants to have something similar to this: [csszengarden.com...]
There are several overlays that are attached to the edges of the screen, while the text in the center is contained in such a way that the original browser scroll bars remain usable. This design is made elastic by allowing it to stretch at least vertically through an extra div.

The tricky part about my design: I have a fixed size div that is supposed to be centered both vertically and horizontally. What I need now are further divs that surround the centered div and expand as the user resizes their window, in order to serve as overlays to hide the text below them.

This is basically it: [imgur.com...]

So broken down even further, what I need is a way to have the four surrounding divs automatically expand or reduce their size so they always fill up all of the screen.

Is there a way to do this without Javascript?

[SuzyUK]

Hi theintz, and Welcome!

Yes there's a way, it took me a minute to get my head around it, as the tricky part is that you want the scroll bar on the browser to remain active so what you actually want is a transparent window in the middle which the content scroll through, that present a problem as you cannot simply overlay the entire effect on the top with a transparent bit in the middle (png or gif), as you cannot the click through a transparent part of a background image to get to a link in the content in IE.. using pointer effects you can with most other browsers.. so this rules out building the whole frame as one image..

but I also believed you couldn't clickthrough/select text through a completely transparent div, which made this last thing I tried seem like it was going to be an impossibility from the start.. however it works!.. it doesn't in FF et all, but because the more modern browsers (Opera 11 not sure about 10.5}.. {pointer-events: none;} it can be done.

so the overlaid transparent div can be used to "anchor" the side, top and bottom bits too and because you know the size of it, and hopefully it's positioned center you can push the four divs you need to the above, bottom, left and right of it.. you just make these four divs the largest you need to (to contain an image effect i presume), and they won't stretch as such.. rather they'll crop as the window narrows.

here's the code:

<div id="content">
<h1>Top of the text content</h1>
<p>enter loads of filler text - <a href="#">text a link for clickability</a></p><p>enter loads of filler text</p><p>enter loads of filler text</p><p>enter loads of filler text</p>
<h3>You have reached the bottom of the text</h3>
</div>

<div id="window">
<div id="otop"><!-- the whole top effect --></div>
<div id="oleft"><!-- contains the full width side effect --></div>
<div id="oright"><!-- contains the full width side effect --></div>
<div id="obot"><!-- contains the bottom effect --></div>
</div>

you can't wrap the content div, the content, therefore the the body must overflow to keep the browser scrollbar in action - the content area must stay transparent or the background just scrolls with the content. Any background image effect that is the content area (or visible under the "window") should be put on the body element, and hopefully it's of a repeating nature in which case just repeat over the whole body.. as it's the body overflow which helps the effect - if you need a background image for the center, use background-position: fixed; and position it center of the body too..

anyhow.. one problem left and that's if the page is narrowed to less than the width of the center pane.. min-width is not enough it seems ..

but anyway here's the CSS with comments for you to play and see if it's any good for your needs..

html, body {padding: 0; margin: 0;}
body {
color: #000;
background: #0f0 url(image.png) fixed 50% 50%;
min-width: 500px;
}

#window { /* it's really a fake window, only used for anchoring it's surrounding divs */
width: 500px;
height: 300px;
position: fixed; /* to stop the anchored divs moving with content */
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -150px;
z-index: 2; /* must be higher than the content div */
pointer-events: none; /* or FF doesn't click through fake window overlay */
}

#otop, #obot, #oleft, #oright {
/* these all nested inside the fake div take their position from it */
position: absolute;
}

#otop {
background: #00f;
width: 1280px;
height: 200px; /*width and height dimension should equal your overall effect size */
top: 0; /* top left corner of fake window */
left: 50%; /* to find center */
margin-left: -640px; /* half the width */
margin-top: -200px; /* should be negative the same as the height of your top image effect it's starting at 0 so just needs pushed up */
}

#obot {
background: #00f;
width: 1280px;
height: 200px; /*width and height dimension should equal your overall effect size */
left: 50%;
bottom: 0; /*bottom left corner*/
margin-left: -640px;
margin-bottom: -200px; /* should be negative the same as the height of your bottom image effect it's starting at 0 so just needs pushed down */
}

#oleft {
background: #0ee;
height: 300px; /* same as window height */
width: 390px;
top: 0;
left: 0;
margin-left: -390px; /* move off to the left by its full width */
}

#oright {
background: #0ee;
height: 300px; /* same as window height */
width: 390px;
top: 0;
margin-left: 100%; /* position starting from the right side, either left or margin-left should do it */
}

#content {
/*keep background transparent, and use the body background*/
position: absolute;
z-index: 1; /* must be lower than the fake window */
width: 480px; /* window width - bit for "padding" */
height: 280px; /* window height minus a bit for "padding" */
overflow: visible; /* default but just here to clarify */
left: 50%; top: 50%; /* find it's center */
margin-left: -240px; /* move it left by half the width */
margin-top: -140px; /* move it up by half the window height */

/* IE hack as padding didn't work for Firefox, see #content:after for it*/
*padding-bottom: 200px; /* maximum needed for text to clear height of bottom div, this will be too much if windowed is narrowed */
}

#content:after { /* create the extra padding works in modern browsers so only ie7 and below need the padding hack above */
content: " ";
display: block;
height: 200px;
}

#content p {line-height: 150px;} /* just to fill out the area quickly */