Menu
I have next html code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
html {height:100%;}body {height:100%;margin:0;}
h1 {form-size:20px;margin:0;padding:20px;}
</style>
</head>
<body>
<table style="width:100%;height:100%">
<tr>
<td>
<div style="background-color:#f00;">
<h1>This text should make height of this cell</h1>
</div>
</td>
</tr>
<tr style="height:100%;" id="row">
<td style="background-color:#c0c;">
<div style="height:100%;width:100%;background-color:#00f;color:#fff;">
This cell should take all unused space of table
</div>
</td>
</tr>
<tr>
<td>
<div style="background-color:#0f0;">
<h1>This text should make height of<br> this cell</h1>
</div>
</td>
</tr>
</table>
</body>
</html>
It works perfect in all browsers - except IE, where blue div inside middle cell takes space only for text. May be someone know how to stretch it to whole free space inside table?
UPDATE: I Know that tables are bad in page-layout. if you can show me example of div layout which have top and bottom block with variable height and middle part which use all free space of browser window I will use it. I promise =)
292
Don't use tables for layout please,
Use Divs and CSS, It is considered a bad practice to use tables:
http://shouldiusetablesforlayout.com
http://www.hotdesign.com/seybold/
http://webdesign.about.com/od/layout/a/aa111102a.htm
http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm
Live Demo converted to DIV's
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
