Home/ Questions/Q 4552740
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T16:50:25+00:00

I’ve done quite a bit of research on CSS fullscreen layouts I just couldn’t

  • 0

I’ve done quite a bit of research on CSS fullscreen layouts I just couldn’t seem to find something like what I’m trying to do. I’m looking for a fullscreen layout with a header, footer, multiple columns, and a sidebar. Here’s an ascii model and then a photoshop mockup. Anyone have any ideas? I’m yet to find a fullscreen layout technique to work.

+-----------------------+-------+
|                       |       |
+-------------+---------+       +
|             |         |       |
|             |         |       |
|             |         |       |
|             |         |       |
|             |         |       |
|             |         |       |
+-------------+---------+-------+
|                               |
+-------------------------------+

Layout Prototype

So tell me, how do you think this could be accomplished? I’m open to CSS 3 or HTML 5 options as cross-browser compatibility is a bonus, but not a necessity (WebKit is the target platform).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    See the below code in action here:
    http://jsfiddle.net/davinciwanab/nX4eq/

    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
            }
        #header {
            float: left;
            width: 75%;
            height: 20px;
            background-color: #333;
            }
        #colRight {
            float: right;
            width: 25%;
            height: 500px;
            background-color: #CCC;
            }
        #content {
            float: left;
            width:  50%;
            height: 480px;
            background-color: #EEE;
            }
        #contentRight {
            float: left;
            width: 25%;
            height: 480px;
            background-color: #AAA;
            }
        #footer {
            width: 100%;
            height: 20px;
            background-color: #777;
            }
    </style>
</head>

<body>
    <div id="header"></div>
    <div id="colRight"></div>
    <div id="content"></div>
    <div id="contentRight"></div>
    <div style="clear:both;"></div>
    <div id="footer"></div>
</body>
    • 0