Home/ Questions/Q 8395779
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T20:23:13+00:00

I have a page which has two distinct parts : a left side of

  • 0

I have a page which has two distinct parts: a left side of a defined width and full height that has a list of pages and a right side of full width and height that displays the selected page. The described behavior works perfectly with A elements and TARGET attributes; you click the link and the source of the IFRAME on the right changes. However, my problem lies in the size of the IFRAME: I want it to fill the entire right side of the page, as it is the main point of the site, so logically I want it to dominate the user’s attention.

My idea was to simply make it all a TABLE that fills the page (with a height and width of 100%) and one row with two cells; one for the left and one for the right. I was able to easily give these both the proper widths and heights (left has width of 6.5in and height of 100%, while right has width and height of 100%). In the left TD cell, I have a the list of pages as a UL of As, which are given, via CSS, the display properties of LIs. In the right TD cell, there is an IFRAME with a width of 100% and a height of 100%. This is where the problem is: it fills the full width, but refuses to be any taller or shorter than the default (150px) This is consistent across IE, Firefox, and Opera, but not Chrome (Chrome properly stretches the IFRAME vertically 100%)! The height value works in pixels, inches, millimeters, and centimeters, but not percents!

Below is a self-contained version of the code, but my main question is Why do most browsers refuse to set IFRAME height using percentages?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<HTML style="border:1px solid #000000; height:100%; width:100%;">
<HEAD>
<STYLE>
UL A{
display:list-item;
}
</STYLE>
</HEAD>
<BODY style="border:1px solid #FF0000; height:100%; width:100%;">
<TABLE style="border:1px solid #00FF00; display:block; height:100%; width:100%;">
    <TBODY STYLE="height:100%;">
        <TR STYLE="height:100%;">
            <TD style="border:1px solid #0000FF; height:100%; width:6.5in;">
                <H1>Pages</H1>
                <DIV>
                    <UL>
                        <A HREF="page1.htm" TARGET="CONTENT_HOLDER">First Page</A>
                        <A HREF="page2.htm" TARGET="CONTENT_HOLDER">Second Page</A>
                        <A HREF="lastPage.htm"  TARGET="CONTENT_HOLDER">Final Page</A>
                    </UL>
                </DIV>
            </TD>
            <TD STYLE="border:1px solid #FFFF00; height:100%; width:100%;">
                <IFRAME NAME="CONTENT_HOLDER" ID="CONTENT_HOLDER" STYLE="border:1px solid #FF00FF; height:100%; width:100%;"></IFRAME>
            </TD>
        </TR>
    </TBODY>
</TABLE>
</BODY>
</HTML>

This should display a basic idea of my site, with the main elements outlined in different colors for clarity. It’s done in poor form (outlines, inline styles, etc.) for the purposes of having small code, here. The actual site has a couple hundred more lines that I don’t think you want to see.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok, here it is – two column layout and the paste:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>layout</title>
<style type="text/css">

html,body {
        width:100%;
        height:99%;
        margin:0;
        padding:0;
}

#left {
        float:left;
        width:6.50in;
        height:100%;
        border:4px solid #008;
        overflow: auto;
        background-color: #eee;
}

#right {
        position: relative;
        margin-left: 6.58in;
        height:100%;
        text-align:left;
        border:4px solid #080;
}

#left h1 {
        margin-left: 1em;
        color:blue;
}

#left ul {
        list-style-type:none;
        padding:8px 2px;
}

#left ul li a {
        font-size:32px;
        padding: 2px 1em;
        text-decoration:none;
}

#left ul li:hover {
        background-color:blue;
        color:white;
}

#left ul li:hover a {
        color:white;
}

#CONTENT_HOLDER {
        border:1px solid #FF00FF;
        height:100%;
        width:100%;
}

</style>
</head>
<body>

<div id="left">
<h1>Pages</h1>
<div>
        <ul>
                <li><a href="page1.htm" target="CONTENT_HOLDER">First Page</a></li>
                <li><a href="page2.htm" target="CONTENT_HOLDER">Second Page</a></li>
                <li><a href="lastPage.htm"  target="CONTENT_HOLDER">Final Page</a></li>
        </ul>
</div>
</div>

<div id="right">
        <iframe name="CONTENT_HOLDER" id="CONTENT_HOLDER"></iframe>
</div>

</body>
</html>
    • 0