WebToolkit

CSS centered layout

Overview  

Ever wanted to make centered (vertically, horizontally) webpage with hiding content for other (smaller) resolutions? Look at the demo page for an example.

First include the style sheet at the top of your code. Do it in <head> tag, then you can write your code.

CSS centered layout demo page
View the demo page for this article

Source code for index.html   (Download source code)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    <head>
        <title>My project</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link media="screen" type="text/css" rel="stylesheet" href="webtoolkit.clayout.css" />

        <style>
            body {
                margin: 0px;
                padding: 0px;
                font-family: verdana;
                font-size: 12px;
            }

            div#layout { /* exploder 5.5+ */
                width: expression((document.body.clientWidth > 790 ? document.body.clientWidth : 790) + "px");
                height: expression((document.body.clientHeight > 490 ? document.body.clientHeight : 490) + "px");
            }

            div#container,
            div#container div.container-top,
            div#container div.container-bottom {
                width: 790px;
            }

            div#container,
            div#container div.container-right,
            div#container div.container-left {
                height: 490px;
            }

            /* colors */
            div#container {
                background: #FFFFFF;
            }

            div#container div.container-top {
                background: #FF0000;
            }

            div#container div.container-right {
                background: #00FF00;
            }

            div#container div.container-bottom {
                background: #0000FF;
            }

            div#container div.container-left {
                background: #FFFF00;
            }

            div#container div.container-top-right {
                background: #00FFFF;
            }

            div#container div.container-bottom-right {
                background: #FF00FF;
            }

            div#container div.container-bottom-left {
                background: #C0C0C0;
            }

            div#container div.container-top-left {
                background: #000000;
            }
        </style>

    </head>

    <body>

        <div id="layout">
            <div id="container">
                <div class="container-top"></div>
                <div class="container-right"></div>
                <div class="container-bottom"></div>
                <div class="container-left"></div>

                <div class="container-top-right"></div>
                <div class="container-bottom-right"></div>
                <div class="container-bottom-left"></div>
                <div class="container-top-left"></div>

                Content goes here...
            </div>
        </div>

    </body>
</html>

Source code for webtoolkit.clayout.css   (Download source code)

body, html {
    height: 100%;
}

    div#layout { /* exploder 5.5+ */
        position: absolute;
        left: 0px;
        top: 0px;
        overflow: hidden;
        text-align: center;
    }

    * > div#layout { /* normal browsers */
        min-width: 790px;
        min-height: 490px;
        width: 100%;
        height: 100%;
    }

        div#container {
            position: relative;
            top: 50%;
            margin-top: -245px;
            margin-left: auto;
            margin-right: auto;
            text-align: left;
        }

        div#container div.container-top {
            position: absolute;
            left: 0px;
            top: -1000px;
            height: 1000px;
        }

        div#container div.container-right {
            position: absolute;
            right: -1000px;
            top: 0px;
            width: 1000px;
        }

        div#container div.container-bottom {
            position: absolute;
            left: 0px;
            bottom: -1000px;
            height: 1000px;
        }

        div#container div.container-left {
            position: absolute;
            left: -1000px;
            top: 0px;
            width: 1000px;
        }

        div#container div.container-top-right {
            position: absolute;
            right: -1000px;
            top: -1000px;
            width: 1000px;
            height: 1000px;
        }

        div#container div.container-bottom-right {
            position: absolute;
            right: -1000px;
            bottom: -1000px;
            width: 1000px;
            height: 1000px;
        }

        div#container div.container-bottom-left {
            position: absolute;
            left: -1000px;
            bottom: -1000px;
            width: 1000px;
            height: 1000px;
        }

        div#container div.container-top-left {
            position: absolute;
            left: -1000px;
            top: -1000px;
            width: 1000px;
            height: 1000px;
        }