help with table layout and cell sizing

liunx · Jan 10, 2008

<a class="postlink" href="http://www.challenor.f9.co.uk/layout/tables1.htm">http://www.challenor.f9.co.uk/layout/tables1.htm</a> 
 
I want the overall height to be that of the window, unless the content text makes it longer - working so far. 
 
But I need the content and links sections to take up the height except for 80px at the header and 80px at the footer. In other words, they should take up ONLY 80px each. 
 
The only way I can think of is looking pretty ugly right now (putting header and content into a nested table) and it would mess up the cell spacings - by the way the spacings will be white, but I coloured them red for clarity. 
 
Hey, I'd like to do it in CSS, but that's looking even uglier! 
 
 
Thanks in advance 
Ben

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>:.Broadband Yealmpton.:</title> 
 
<style type="text/css"> 
 
#ahem 
{ 
display: none; 
} 
 
/* Above causes the browser update text to be invisible, if read by a CSS browser */ 
 
 
html, body 
{ 
margin: 0; 
padding: 0; 
 
min-height: 100%; 
height: 100%; 
width: 100%; 
 
background: #fff; 
 
text-align: center; 
} 
 
 
table 
{ 
background: #f00; 
} 
 
 
td 
{ 
background: #ffbf00; 
} 
 
</style> 
 
 
</head> 
<body> 
 
 
 
 
 
 
 
 
 
This site will look much better in a browser that supports 
<a href=http://www.htmlforums.com/archive/index.php/"http://www.webstandards.org/upgrade/">web standards</a> 
, but it is accessible to any browser. 
 
 
 
<img src=http://www.htmlforums.com/archive/index.php/"spacer_black.gif" alt="horizontal rule" width="100%" height="3"> 
 
 
 
 
 
 
 
 
<table border="0" cellspacing="3" cellpadding="0" width="600" height="100%"> 
 
<tr valign="top"> 
<td height="80" width="370"><img src=http://www.htmlforums.com/archive/index.php/"spacer_black.gif" width="370" height="80"></td> 
<td height="80">[blank]</td> 
</tr> 
<tr valign="top"> 
<td>content</td> 
<td>links</td> 
</tr> 
<tr valign="bottom"> 
<td height="80"><img src=http://www.htmlforums.com/archive/index.php/"spacer_black.gif" width="370" height="80"></td> 
<td height="80">copyright</td> 
</tr> 
</table> 
 
 
 
 
 
</body> 
</html>ok so I am a little lost on what you want to do. why is what you got not working?I believe what you mean is of the 3x rows you have, for row #1 and row#3 to remain a height of 80px and for row#2 to take up all of the rest of the height of the window regardless of what size the window is... 
 
(edit)my complicated explaination-->row#1 and row#3 look fine for that but because row#2 doesn't have a size amount then ( at least in my ie here ), the browser resizes all 3x rows to compensate for the variable height of row#2 but keeps row#1 and row#3 at a bare minimum of 80px... 
 
so basically, if you resize the browser then row#1 and ro#3 will grow and shrink but will NOT shrink below 80px even if row#2 has to completely disappear... but when you resize the window big enough then the browser will resize all of the rows as evenly as it can given the varience of ros 1 and 3... 
 
solution-->but if row#2 has a specified height of 100% then the browser will take the presedence of the pixel definition as more important and THEN will work with the percentage amount.... 
   try using this as row#2: 
 
<tr valign="top" HEIGHT="100%"> 
<td>content</td> 
<td>links</td> 
</tr> 
 
DONT CHANGE row #1 or row#3 and then try it out

Thanks, I had already come to that conclusion myself.

The problem is that IE6 renders the table as 80px + 100% + 80px, making it bigger than the window. I thought up loads of crazy and over-engineered solutions, but until you can put height="100%-160px", I have decided to live with it!

Cheers 
Benit didn't work!?

I see what you mean.... 
 
after a bit if beta testing, the problem lies with the doc line at the begining: 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 
just remove this and you don't even have to put in the height="100%"Originally posted by ucm 
it didn't work!?

I see what you mean.... 
 
after a bit if beta testing, the problem lies with the doc line at the begining: 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 
just remove this and you don't even have to put in the height="100%" 
uhh don't remove that. just take this off 
 
"http://www.w3.org/TR/html4/loose.dtd" 
 
you want the doctype in tehre at all times. that is all you neeed to change. also your analogy of 80px + 100% + 80px is wrong. 
 
if you have 80px on both sides then you want the rest in the middle. so you take the 160 - 780 (close to the max) and then you times that by 100 to get the rest of the percentage. so 620 is roughly around 90% so use that instead.Can't I just change the markup type instead of removing that? I assume I've violated one of the 4.01 trans rules. 
 
And I don't see what's wrong with the analogy, as that was what was happening: the table was 80px + 100% + 80px, or 160px + portal height. It extended beyond the portal height. Or do you mean 'the analogy' as in what should be done to correct it?"http://www.w3.org/TR/html4/loose.dtd" 
 
I have seen that cause a lot of wierd problems so just delete it. the other part is fine and you need that. 
 
also 80px + 100% + 80px 
 
should be 80px + 90% + 80px 
 
always have to take up the slack and if you take up 100% of it then where does that leave you. theoretically I wouldn't even worry about the height. it will only expand if the content is long enough to make it expand. plus in NS browsers the height is real buggy and sometimes just flat doesn't work. 
 
but 80px + 90% + 80px should work for IE browsers.Yeah, I decided to let the height go. I mean a page with that much content would be pretty useless really!

But on the topic of: 
80px + 100% + 80px 
versus 
80px + 90% + 80px 
 
Surely you can't decide without knowing the height of the browser, which depends on screen res? 
 
Say the screen was over 1600px tall (just say). 160px would be less than 10%, so 90% + <10% would not be 100%. And it would not fill the height. 
 
And so 100% becomes the best option.so you are worried about 1-2% difference? I wouldn't.

help with table layout and cell sizing

liunx

Guest