Question

Got a small issue with this website structure: http://www.bigideaadv.com/xsp

Looking to have this container fill the middle of the screen between the top and bottom navigation. I’d also like to have the middle collapse with the resizing of the window with a scrollbar. Can’t seem to make it work quite right. Anyone have any thoughts?

    <div id="top_navigation">   
        <div id="navigation_inside">
            <ul id="navigation">
                <li><a href="">Schedule Demo</a></li>
                <li><a href="">Sales</a></li>
                <li><p style="float:left; margin:0;">Search</p>&nbsp;&nbsp;<form style="margin:0 0 0 5px; padding:0; float:left;"><input class="search" type="text" /><input type="hidden"></form></li>
            </ul>
            <ul id="navigation2">
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Products</a></li>
                <li><a href="">People</a></li>
                <li><a href="">News + Events</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </div>
    </div>
    <div id="container">
        <div id="scroller">
        </div>
    </div>
    <div id="bottom_navigation">
        <div id="twitter_bar">
            <div id="twitter">
                <h5><img src="images/twitter_bird.png" width="23" height="16" />&nbsp;&nbsp;<b>@XSPGlobal:</b>&nbsp;</h5>
                <p>Loading...</p>
                <noscript><h5>This feature requires JavaScript</h5></noscript>
            </div>
        </div>
        <div id="blog_posts">
            <p>Here is where the blog posts will go.</p>
        </div>
        <div id="bottom_navigation_inside">
            <ul>
                <li><a href="">Partners</a></li>
                <li><a href="">Interfaces</a></li>
                <li><a href="">Careers</a></li>
                <li><a href="">XACT Blog</a></li>
                <li><a href="">Milestones</a></li>
                <li><a href="">Awards + Recognition</a></li>
                <li><a href="">Client Testimonials</a></li>
                <li><a href="">Press Releases</a></li>
                <li><a href="">Social Responsibility</a></li>
                <li><a href="">Privacy Policy</a></li>
                <li><a href="">Terms & Conditions</a></li>
            </ul>
        </div>
        <div id="social_links">
            <a href="http://www.facebook.com"><img src="images/facebook.png" width="23" height="24" /></a>
            <a href="http://www.twitter.com"><img src="images/twitter.png" width="23" height="24" /></a>
            <a href="http://www.linkedin.com"><img src="images/linkedin.png" width="23" height="24" /></a>
        </div>
    </div>

CSS:

    #container {
        margin: 72px 0 72px 0;
        width: 100%;
        height: 100%;
    }

    #top_navigation {
        position: fixed;
        min-width: 1010px;
        width: 100%;
        height: 72px;
        background: url('../images/opaque.png') repeat;
        text-transform: uppercase;
    }

    #bottom_navigation {
        position: absolute;
        min-width: 1010px;
        width: 100%;
        height: 172px;
        background: url('../images/opaque.png') repeat;
        text-transform: uppercase;
    }

Answer 1

set the container to position fixed with a top of 72px and a bottom of 172px.