table stretch to 100% in all browsers

peterpann · Jan 25, 2012

How can I get the yellow table to stretch to 100% of the height of the brown in all browsers ?
It does in IE and FX, but not in Opera or Chrome.
<code>
<html>
<body>
<table width="100%">
<tr>
<td width="20%" bgColor="brown" align="middle">
<table height="100%" bgColor="yellow">
<tr>
<td valign="top">
<table>
<tr>
<td bgColor="pink">top</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="bottom">
<table>
<tr>
<td bgColor="cyan">bottom</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="80%" height=400 bgColor="magenta" align="left" valign="top">
 
</td>
</tr>
</table>
</body>
</html>
</code>

ChrisHirst · Jan 25, 2012

Give the html and body elements 100% height.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

darryncooke · Jan 25, 2012

Just an FYI - tables arent used in web design and development unless displaying tabular data.

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

BigRed1212 · Jan 26, 2012

By way of illustration of the last point, compare your markup to this quick and dirty markup:

Code:

<div id="leftDiv">
    <p></p>
        <div class="topDiv">
		<p>top</p>
        </div>
        <div class="bottomDiv">
		<p>bottom</p>
	</div>
</div>

<div id="rightDiv">
    <p></p>
</div>

Styled like so:

Code:

<style type="text/css">
      div#leftDiv {
         width: 20%;
         position: relative;
         float: left;
		 height:100px;
		 background-color:brown;}

      div#rightDiv {
         width: 80%;
         position: relative;
         float: left;
         height:100px;
         background-color:magenta;}
      
      div.bottomDiv {
         position: absolute;
         width: 25%;
         left: 40%;
         bottom: 2px;
         background-color:cyan;}

      div.topdiv {
         position: absolute;
         width: 25%;
         left: 40%;
         top: 2px;
         background-color:pink;}
</style>

They should look pretty close. (I ignored the yellow- didn't figure you really wanted that.)

peterpann · Jan 31, 2012

BigRed1212, thanks for the CSS code, okay in all 4 browsers now. However if I put more text in <div class="bottomDiv">, for smaller screen sizes and browser Text Size = Largest, it can become taller than <div id="leftDiv">, whereas tables stretch vertically to accomodate. How does CSS deal with this ? Thanks.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

table stretch to 100% in all browsers

peterpann

Programmer

ChrisHirst

IS-IT--Management

darryncooke

Technical User

BigRed1212

Technical User

peterpann

Programmer

Similar threads

Part and Inventory Search

Sponsor