4

How can I specify a CSS/HTML layout that works in all modern browsers and will push components to the edges of available space and provide a central area that is maximized - minus the edge components sizes. Something like this:

------------------------------
|    |   north         |     |
|    |                 |     |
------------------------------
|    |                 |     |
|    |                 |     |
|    |                 |     |
|west|     center      |east |
|    |                 |     |
|    |                 |     |
|    |                 |     |
|    |                 |     |
------------------------------
|    |     south       |     |
|    |                 |     |
------------------------------

The goals is that the space available to the center component is dictated by the actual size of the content in the north,south,east and west areas.

Is this possible to solve with pure CSS/HTML without any JS?

This html achieves the goal in Firefox and Webkit, but in IE9, the center div does not get access to the available vertical space.

<!doctype html>
<html>
<head>
</head>
<body>
    <div
        style="position: absolute; top: 20px; left: 20px; width: 200px; height: 200px;">
        <table style="width: 100%; height: 100%; border:1px solid gray; border-collapse:collapse;cell-padding:0px;">
            <colgroup>
                <col style="width: 1%" />
                <col style="width: 100%" />
                <col style="width: 1%" />
            </colgroup>
            <tbody>
                <tr height="1%">
                    <td></td>
                    <td>north</td>
                    <td></td>
                </tr>
                <tr height="100%">
                    <td>west</td>
                    <td><div style="width:100%;height:100%;border:1px solid green;">center</div></td>
                    <td>east</td>
                </tr>
                <tr height="1%">
                    <td></td>
                    <td>south</td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
rekire
  • 47,260
  • 30
  • 167
  • 264
yarrumretep
  • 101
  • 1
  • 9
  • So you just want panels on all sides of the page of a certain width? – jacktheripper Jan 05 '12 at 17:49
  • I want a layout that will push the N,E,S,W content to the edges of the available space (could be within other components) and then provide a maximized center space that works with width:100%, height:100%. If you look at the above HTML in IE9, you will see that instead of getting a nice green bordered box inside of the north/east/south/west words, you get a vertically tight box. The center offers no height for its content (in IE - all others are OK). – yarrumretep Jan 05 '12 at 18:02
  • 1
    Why can you not use a JavaScript solution here? In most situations it would be preferable to a table-based layout. – Dan Blows Jan 05 '12 at 18:07
  • @Blowski - agree but javascript is not necessary either. – Rob Jan 08 '12 at 16:56
  • @Rob Depends on which browsers need to be supported. I can't see how this would work with legacy browsers (i.e. <=IE8) without JavaScript. – Dan Blows Jan 08 '12 at 17:55

3 Answers3

1

You probably want to use the box model like in this post: CSS 100% height with padding/margin

And remember to use a DOCTYPE at the begining of yout html like 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

or 

 <!DOCTYPE html>

For html 5.

The doctype will tell browsers how to behave and they will be almost the same with that that instruction.

There are some explanation about the box model on this site http://www.w3schools.com/css/css_boxmodel.asp

Community
  • 1
  • 1
Rogel Garcia
  • 1,895
  • 14
  • 16
  • 1
    New web pages have no use for the transitional doctype. Always use strict. There is no such thing as a "html5 doctype" either. The second one you show is a html doctype, period. – Rob Jan 08 '12 at 16:57
1

Below code will work in both IE and Mozilla:

Final Result

<html>
<head>
</head>
<body>

<div style="position: absolute;width: 98%; height: 98%;">

<table style="border: 1px solid gray; text-align: center; vertical-align: middle; height: 100%; width: 100%;">

<colgroup>
<col style="width: 1%">
<col style="width: 100%; height: 100%;">
<col style="width: 1%">
</colgroup>

<tbody>

<tr height="1%">
<td></td>
<td style="vertical-align:middle">north</td>
<td></td>
</tr>

<tr height="100%">
<td>west</td>
<td style="border-top:  1px solid green; border-left:  1px solid green; border-right: 1px solid green; border-bottom:  1px solid green;  vertical-align: middle; height: 100%; width: 100%;">center</td>
<td>east</td>
</tr>

<tr height="1%">
<td></td>
<td style="vertical-align:middle">south</td>
<td></td>
</tr>

</tbody>

</table>

</div>

</body>
</html>
Chandra Sekhar
  • 16,256
  • 10
  • 67
  • 90
  • @Blowski can you elaborate your comment, i didn't get you. – Chandra Sekhar Jan 09 '12 at 03:38
  • This is a table-based layout, as in, it uses tables to position content on the page. Wherever possible, you should use a CSS-based layout, with the HTML just describing the content and not it's position. That is possible here, with a sprinkling of JavaScript. Here's a good article that covers the reasons in detail - http://www.chromaticsites.com/blog/13-reasons-why-css-is-superior-to-tables-in-website-design/ – Dan Blows Jan 09 '12 at 07:13
  • @Blowski as my understanding i prepared the code, i considered `Is this possible to solve with pure CSS/HTML without any JS?` and if you see code given by @yarrumretep it contains ` ` it doesn't contain table-based layout!, sorry if i mus-understood! (i am not an expert in css/html). – Chandra Sekhar Jan 09 '12 at 08:50
0

Try this code.

    <html>
<head>
<style type="text/css">

.top {
    background-color: #18ff3a;
    width: 100%;
    height: 50px;
    position: relative;
    z-index: 999;
}

.bottom {
    background-color: #3900ff;
    bottom: 0px;
    width: 100%;
    height: 50px;
    position: relative;
}

.left {
    background-color: #ff5a91;
    top: 0px;
    width: 50px;
    height: 100%;
    position: relative;

}
.right {
    background-color: #ffcf0e;
    top: 0px;
    right: 0px; 
    width: 50px;
    height: 100%;
    position: absolute;
}

</style>
</head>
<body style="margin:0px;padding:0px;width:100%;height:100%;">
<div style="position:relative;">
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
</div>
</body>
</html>
jacktheripper
  • 13,953
  • 12
  • 57
  • 93
  • Thanks, Jack, but the whole issue is that we don't know how wide the left/right and how high the top/bottom need to be to show all of their content. We'd like the browser to figure it out and give us the layout - but perhaps we'll have to maintain the distances using a scheme like you suggest and javascript to effect changes. – yarrumretep Jan 05 '12 at 19:29
  • You can still use this, just set the static widths and heights to `min-width` and `min-height` instead. Then it should flow with whatever content is in them, but never go any smaller than your min sizes. – Shawn Steward Jan 05 '12 at 19:34