Percentage widths in IE5

Forum Moderators: not2easy

Message Too Old, No Replies

Percentage widths in IE5

not relative to containing div

matthewwithanm

8:45 pm on Dec 20, 2005 (gmt 0)

I have two columns, the first of which is floated right and has a defined width. Inside the left column, I have a table. I want the table to be the same width as the left column (which, since it is not floated, expands with the window). Setting the table width to 100% works for most, but IE5 interprets that as 100% the width of the window, not the containing div.

Does anybody know of a workaround for this? Thanks.

xfinx

8:14 am on Dec 21, 2005 (gmt 0)

if you have a div which has position: relative;
and in the div the table set to 100%, It will work (it worked with me)

matthewwithanm

2:09 pm on Dec 21, 2005 (gmt 0)

Really? In IE5? Here's a simplest case. Relatively positioning div#leftColumn does have an effect but not the desired one.

<?xml version="1.0" encoding="iso-8859-2"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
    "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"> 
  
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> 
    <title>Untitled</title> 
    <style> 
* { 
  border: 0; 
  padding: 0; 
  margin: 0; 
} 
div#rightColumn { 
  float: right; 
  width: 300px; 
  background: lime; 
} 
div#leftColumn { 
  margin-right: 300px; 
  background: pink; 
} 
table { 
  width: 100%; 
  background: red; 
} 
    </style> 
  </head> 
  <body> 
    <div id="rightColumn"> 
      stuff right 
    </div> 
    <div id="leftColumn"> 
      <table> 
        <tr><td> 
          hey! 
        </tr></td> 
      </table> 
    </div> 
  </body> 
   
</html>

Thanks for the help.

xfinx

2:20 pm on Dec 21, 2005 (gmt 0)

you might want to get rid of this one:
<?xml version="1.0" encoding="iso-8859-2"?>

xfinx

2:42 pm on Dec 21, 2005 (gmt 0)

This works with me:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<title>Untitled</title>

<style>

body {
margin: 0;
padding: 0;
}

div#rightColumn {
float: right;
position: relative;
width: 300px;
background: #f00;

}

div#leftColumn {
position: relative;
background: #0f0;
width: 700px;
float: left;/*Ie behaves the same way as FF now..*/
}

table {
width: 100%;
background: #00f;
}

</style>
</head>

<body>
<div id="rightColumn">
rightColumn
</div>
<div id="leftColumn">
LeftColimn
<table>
<tr><td>
hey!
</tr></td>
</table>
</div>
</body>

</html>

matthewwithanm

3:25 pm on Dec 21, 2005 (gmt 0)

Fair enough. But if you're going to assign a width to div#leftColumn, why bother using percentage for the table width? My goal is to have an expanding left column within which lies an expanding table.

iamlost

9:03 pm on Dec 21, 2005 (gmt 0)

Simply removing the explicit table width i.e. table: {background: red;} works but if the table content is less than the container width the table will not be the desired 100% width of the containing div.

To have the table always filling the container div width in a cross-browser manner requires supplying IE5 with two variants. This can be done as a hack within your main stylesheet or as a separate stylesheet supplied via a conditional statement.

The main stylesheet remains as per your posted example.
Then supply IE5:
table {
width: auto; /* to over-ride the explicit width causing the problem. */
table-layout: fixed; /* to get the always 100% width desired */
}

Note: If not a posting error you should reverse the </tr></td> in the html.