Question

I want to create a grid layout for a webpage. It should consist of nine cells which fit exactly in the current browser window viewport. The center cell should have a fixed width and height and centered horizontally and vertically. All other cells are dynamically adjusted to fit the actual browser window size.

I would prefer a CSS only solution, maybe an open source CSS grid framework. jQuery is fine too, though.

Answer 1

Ok, got it myself: http://jsfiddle.net/alp82/TR6EY/

HTML:

<div id="container">
    <div id="top">
        <div id="top-left">
            <h1>TOP LEFT</h1>
        </div>
        <div id="top-center">
            <h1>TOP CENTER</h1>
        </div>
        <div id="top-right">
            <h1>TOP RIGHT</h1>
        </div>
    </div>
    <div id="middle">
        <div id="mid-left">
            <h1>MID LEFT</h1>
        </div>
        <div id="center">
            <h1>CENTER</h1>
        </div>
        <div id="mid-right">
            <h1>MID RIGHT</h1>
        </div>
    </div>
    <div id="bottom">
        <div id="bot-left">
            <h1>BOTTOM LEFT</h1>
        </div>
        <div id="bot-center">
            <h1>BOTTOM CENTER</h1>
        </div>
        <div id="bot-right">
            <h1>BOTTOM RIGHT</h1>
        </div>
    </div>
</div>

CSS:

html, body {
    margin: 0px;
}

#container {
    display: table;
    width: 100%;
}

#container > div {
    display: table-row;
}

#container > div > div {
    display: table-cell;
    vertical-align: middle;
}

#center {
    width: 300px;
    height: 200px;
}

h1 {
    text-align: center;
}

JS:

$(document).ready(function() {
    calculateHeights();

    $(window).bind('load resize orientationchange', function() {
        calculateHeights();
    });

    function calculateHeights() {
        $('#top, #top > div, #bottom, #bottom > div').css({
            'height' : (($(window).height() - $('#center').height()) / 2) + 'px',
            'min-height' : (($(window).height() - $('#center').height()) / 2) + 'px'
        });
    }
});