Why don't HTML elements always obey CSS height attribute?

Question

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.

using a table for layout is considered very poor practice, and obsolete. Same with inline CSS, and several other things in your code. And I've not seen anyone write upper-case HTML in years. Your code looks like you've been learning HTML from a 10 year old book. Things have moved on a lot. — Spudley, Aug 15 '12 at 20:11
The table is so that the left and right side are guaranteed to only ever be left and right with nothing in between or to the sides; I couldn't find a better way to make this a left/right page. The inline CSS was so I could put it all into one snippet. I taught myself HTML by studying webpages and w3 documentation. — Ky -, Aug 15 '12 at 20:19

score 0 · Answer 1 · answered Aug 15 '12 at 20:08

0

If you take just the code for your iframe you will see that it stretches to 100% in IE. This issue might be with your table. Tables are not considered best practice for page layout. You may want to look into using 'float' for your layout.

answered Aug 15 '12 at 20:08

robbieAreBest

1,601
14
16

"Float" does not create the intended design; I want the table of contents to always be on the lect and 6.5 inches wide, while the content should always be on the right and fill the entire rest of the page. Here's a screenie of what the intended actual page looks like: http://fc01.deviantart.net/fs71/f/2012/228/c/9/windows_8_presentation_example_by_supuhstar-d5bbvl9.png – Ky - Aug 15 '12 at 20:26
@Supuhstar For such a simple layout tables are really not necessary here. – Stano Aug 15 '12 at 20:31
how would you suggest i do it? I'd love to see your solution! Also mention why tables would be less efficient. – Ky - Aug 15 '12 at 21:00
Also, this doesn't answer my question **at all**. – Ky - Aug 15 '12 at 21:33
@Supuhstar So I know two main reasons people argue: first that tables are wrongly displayed on screenreaders and second that tables are semantically incorrect - for more info you can read community wiki answers here: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – Stano Aug 15 '12 at 22:25
It does answer your question. To be more direct, browsers are not refusing to set height with percentage. If you make a page with just a simple iframe you will see it stretch to 100% (like I said above). You probably have an issue somewhere with nesting in a table which is why I advised using a float. – robbieAreBest Aug 20 '12 at 15:27
It might not even be your table, it might be the assigned styles as well. Take `display:block;` out of you table tag and see what happens. The iframe was stretched to 100% but your td was not. – robbieAreBest Aug 20 '12 at 15:42

score -1 · Accepted Answer · answered Aug 15 '12 at 21:59

-1

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>

answered Aug 15 '12 at 21:59

Stano

8,749
6
30
44

btw, you can also easily switch to html5 with ` ` – Stano Aug 15 '12 at 22:32
Thanks for creating this without tables, but it doesn't answer my question. – Ky - Aug 15 '12 at 23:49
Well, to disable auto-optimalization of table proportions, force [fixed table layout](http://www.w3schools.com/cssref/pr_tab_table-layout.asp) algorythm and revert `display` property to default: `` Additionaly you can also delete those redundant inline styles for `tbody` and `tr` tags in your html.
– Stano Aug 16 '12 at 09:35
alright, so that's how to make THIS work, but it doesn't say WHY it doesn't even work in the first place. – Ky - Aug 16 '12 at 15:43
you gave me a solution to how to fix it. I want to know why it was broken in the first place. – Ky - Aug 19 '12 at 08:09
1

I solved similar problem with tables a few months ago, long strings were stretching table cells, although it had defined word-wrap and cell width. The same issue obviously happened also with your iframe. I was looking for some solution and [found this answer](http://stackoverflow.com/questions/1258416/word-wrap-in-a-html-table/1883702#1883702) here. That fixed layout preserves defined widths and proportions you have defined in CSS and disables automatic browser optimization. So this is all I know about it. – Stano Aug 19 '12 at 15:16

Why don't HTML elements always obey CSS height attribute?

2 Answers2