Two horizontal divs' fluid height in a div

Question

I am not a web designer.. I'm just a asp.net programmer and I'm having a hard time with IE7. Well I managed to work what i want in IE8, IE9, and Chrome. Now I have to make it work it in IE7.

First this is my source

I am using DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

and html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko"

<style type="text/css">
    html {
    height: 100%
}
body {
    background-color: #5c87b2;
    font-size: .85em;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
    border: 0;
    overflow: visible;
    height: 100%; 
    max-height: 100%;
}
</style>

<div id="header" style="
                        display:block;
                        position:fixed;
                        height:50px; width:100%;
                        background-color:red;">
                        d

</div>
<div id="menu" style="
                        display:block;
                        position:fixed;
                        width:200px;
                        top:50px; left:0; right:auto; bottom:0;
                        background-color:blue;">
                        d

</div>
<div id="button" style="
                        display:block;
                        position:fixed;
                        width:auto; height:100px;
                        top:50px; left:200px; right:0; bottom:auto;
                        background-color:Yellow;">
                        d
</div>
<div id="content" style="
                        display:block;
                        position:fixed;
                        width:auto; height:auto;
                        top:150px; left:200px; right:0; bottom:0;
                        background-color:green;">
    <div style="
                position:relative;
                height:50%;
                min-height:50%;
                border:3px solid pink;
                ">12412
    </div>
    <div style="
                position:relative;
                height:50%;
                border:3px solid white;
                ">
                2214124
    </div>
</div>

so I have a header(red), menu on the left side(blue), sub-header(yellow), container(green) and i need two divs in the container(pink, white border). they need to fill up the container 100% vertically. All the outside divs' positions are fixed. And I gave the inner two divs' position relative and gave 50% height to both. It works fine in IE8,9, Chrome.

I will not use script. Only trying to use css styles.

So can u guys please give me some help??

Thank U!!!!!

what if you switch to a strict doctype? would it solve the issue? — Fabrizio Calderan
For experimentation, here's the source: jsfiddle.net/developdaly/hjkZm — developdaly
@F. Calderan :( Well maybe that will work but XHTML 1.0 is the only DOC TYPE i can use — Tom Kim

pharalia pharalia · Accepted Answer · 2012-04-20T14:21:53

Setting a height on the outer #content div allows the inner divs to display as in the other browsers. As you are looking for a full-screen panel set-up, I'm not sure how you could achieve this with pixel values. Changing from px to % and specifying positioning and width / heights as fluid seems to achieve the desired effect in IE7.

http://jsfiddle.net/VCztH/3/

Two horizontal divs' fluid height in a div

1 Answers