Home/ Questions/Q 7997153
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T14:54:14+00:00

I’m working on a layout with a container (div), inside the container there are

  • 0

I’m working on a layout with a container (div), inside the container there are two elements, a div for the header and another div for the content.
The header div has a fixed height, the div for the content must fill the available space.
The container div has own style and cannot be overlapped.
My goal is to create simple div based elements to dispose simple widgets on a web page.

I checked the other similar questions like:

But none of this solutions applies to me.

I managed to get this html/css:

<?xml version="1.0"?>
<html>
    <head>
        <style type="text/css">
            .workbench {
                width: 100%;
                height: 100%;
                background: white;
            }
            .widget {
                width: 100px;
                height: 500px;
                position: absolute;
                top: 50px;
                left: 50px;
                border: solid 1px black;
                margin: 2px;
            }
            .widget-header {
                height: 50px;
                border: solid 1px red;
                margin: 2px;
            }
            .widget-body {
                position: absolute;
                top: 50px;
                bottom: 0px;
                left: 0px;
                right: 0px;
                border: solid 1px blue;
                overflow: hidden;
                margin: 2px;
            }
        </style>
    </head>
    <body>
        <div id="workbench" class="workbench">
            <div id="widget" class="widget">
                <div id="widget-header" class="widget-header">
                    Header
                </div>
                <div id="widget-body" class="widget-body">
                    Body
                </div>
            </div>
        </div>
    </body>
</html>

This is working like a charm on FireFox and Chrome, but doesn’t work on Internet Explorer 8:

Page result

Can you help me?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    realizing you’re not aiming at the IE5.5 / IE6 market, and by your descriptions (renders fine on jsFiddle, while not from a file), the issue seem to originate from the absence of a doctype declaration.

    in order for the document to render correctly you must specify a doctype, to deny the browser from falling to quirksmode. your document seem to conform to a valid XHTML convention, therefore you can use the XHTML transitional doctype to instruct IE8 to render in standards mode, or use the HTML5 doctype (along with an HTML5 shim/shiv, if you’ll be using HTML5’s semantics as well).

    just for convenience, the XHTML transitional doctype declaration:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    note: Modernizr contains an HTML5 shiv of its own, and is recommended regardless to ease up the development.

    here’s the jsFiddle for you to mess around with

    • 0