We help IT Professionals succeed at work.
Get Started

Why is my 3 row table stretching 100% high, but the middle row stretches oddly in Internet Explorer?

Ultrus asked
Last Modified: 2013-12-08
Hello Gurus,
I'm troubleshooting a table that stretches 100% high,where the top and bottom row have pixel heights, and the middle row is supposed to stretch and fill the gap. This is working great everywhere but Internet Explorer, collapsing the middle row and making the top and bottom rows stretch.

In the example provided, the table fills the whole page. The actual template I'm working on mainly uses this type of table to fill different columns of the page layout to make variable height content in cell A line up with variable height content in cell B. The main template shell also follows this format, which could be changed, but that doesn't resolve what's going on with the content within the page.

I could "resolve" this issue by forcing IE into quirks mode like this:
<!--[if IE]>
<![if !IE]>
<!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">

However, that seems unprofessional and causes some other undesirable side effects. Any thoughts on how to make this work? If I have to, I'll rebuild every page but my boss wouldn't be too happy with that. :P I can also change the doctype if needed "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> " is not valid, so I guess I couldn't use that. I also want to leave the stone ages if I can with doctype.

I've seen some partial solutions in other areas, but have not hit the target yet.

Thanks for the assist! Let me know if I can provide further info.
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS height: 100%; Test</title>
<style type="text/css">
body, html {
	height: 100%;
	margin: 0px;
	background-color: #000000;
table {
	padding: 0px;
	border-spacing: 0px; 
	border-width: 0px;
	width: 100%;
	border-collapse: collapse;
	margin: 0px;
td {
	padding: 0px;
	border-spacing: 0px; 
	border-width: 0px;
	vertical-align: top;
	text-align: left;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 10pt;
	margin: 0px;
      <table style="height: 100%; width: 100%;">
          <td style="height: 80px; background-color: #FF9900;">
    	      height: 80px;
          <td style="background-color: #CC0000;">
          	height: (not specified - looks great in FireFox, causes odd stretching in IE, unless doctype is removed)
          <td style="height: 30px; background-color: #FF9900;">
    	    height: 30px;

Open in new window

Watch Question
This problem has been solved!
Unlock 1 Answer and 7 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE