No replies
chatmaster
Offline
newbie
Last seen: 12 years 15 weeks ago
Joined: 2008-12-23
Posts: 2
Points: 0

Hi people,

I am trying and failing to get my layout to work across every browser. I'm currently using a table layout but this is not quite correct either.

The top bar should be 60 pixels in height. The "game" area should use the remaining space.

Here is the simplified code, it is not rendering correctly in IE6.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB" xml:lang="en-GB">
<head>
    <title>test</title>
    <style type="text/css">
        html, body {
            background: white;
        }
        #top {
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            height: 60px;
            background: red;
        }
        #game {
            position: absolute;
            left: 0px;
            right: 0px;
            top: 60px;
            bottom: 0px;
            background: green;
        }
    </style>
</head>
<body>
    <div id="top">
        top top top top top top top top
    </div>
    <div id="game">
        game game game game game game game game
    </div>
</body>
</html>

I have seen alternative code here:
http://www.dave-woods.co.uk/?p=144

However, the "game" area displays an applet which should use 100% remaining space, however I need to somehow instruct the applet this. If it's nestled inside a div it can use 100% of containing area easily, but I'm not sure how to instruct 100% - 60px height?

I'm not sure how to proceed, so pointers will be great.

Kind thanks in advance.