CODEWITHSUNDEEP
csshtml
theintz
theintz

Reputation: 1987

fixed size centered div surrounded by expanding divs

I am working on a website and the client wants to have something similar to this: http://www.csszengarden.com/?cssfile=202/202.css 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: https://i.sstatic.net/4IRAJ.jpg

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?

Upvotes: 2

Views: 965

Answers (1)

thirtydot
thirtydot

Reputation: 228182

  • This won't work in IE7 without some crazy hacks, because IE7 does not support display: table and friends.
  • I will have a look at making this work in IE7 if it's a requirement for you.
  • Tested in IE8 and recent versions of Firefox, Chrome, Safari, Opera.

Live Demo (edit)

HTML:

<div id="top">top stretch</div>
<div id="middle">

    <div id="middleContainer">
        <div class="stretch">left stretch</div>
        <div id="fixed">fixed</div>
        <div class="stretch">right stretch</div>
    </div>

</div>
<div id="bottom"><div id="bottomContent">bottom stretch</div></div>

CSS:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden
}

#top, #bottom {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center
}
#top {
    top: 0;
    height: 50%
}
#bottom {
    bottom: 0;
    height: 50%
}
#bottomContent { /* you don't need this if bottom won't hold "content" */
    position: absolute;
    right: 0; bottom: 0; left: 0
}


#fixed {
    width: 400px
}
#middle { 
    background: #ee1c24;
    position: absolute;
    width: 100%;
    height: 300px;
    top: 50%;
    margin-top: -150px; /* height/2 */
    left: 0;
    z-index: 1
}
#middleContainer {
    display: table;
    width: 100%;
    height: 100%
}
.stretch, #fixed {
    display: table-cell
}



/* just for demo */
#top, #bottom, .stretch {
    background: #b5e61d;
    border: 5px solid #000
}
#fixed {
    border-top: 5px solid #000;
    border-bottom: 5px solid #000
}

Upvotes: 1

Related Questions