This code is working fine with Firefox but IE there is just a box in the middle. This is HTML CODE: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <body> <table id="container"> <tr> <td><table id="inner"> <tr> <td></td> </tr> </table></td> </tr> </table> </body> </html> HTML: and CSS: html,body{ height:100%; background-color: #000; } #container{ width:100%; height:100%; background-color: #000; } #inner{ height:100%; width:500px; background-color: #FF6600; clear: both; margin: auto; } Code (markup):
Sorry nals, but using a table for a SINGLE element - /FAIL/ at intarweb HARD. Nesting double Deep? Even worse. (I'm not saying don't use tables - I'm saying use them when they make SENSE)... Save yourself some HTML and just use ONE DIV - that's ALL that's needed. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection" /> <title>Template</title> </head><body> <div id="container"> </div> </body></html> Code (markup): if you want the scrollbar on the window: screen.css * { margin:0; padding:0; } html, body { height:100%; } body { background:#000; text-align:center; /* IE 5.x centering fix */ } #container { width:500px; min-height:100%; text-align:left; /* return to normal after IE 5.x fix */ margin:0 auto; overflow:hidden; /* make wrap floats - just in case */ background:#F60; } * html #container { /* lte IE6 */ height:100%; /* IE treats min-height as height */ overflow:visible; /* height screws up overflow:hidden, but haslayout gives us the same thing in IE6/earlier so set back to 'visible' */ } Code (markup): if you want the scrollbar on #container - * { margin:0; padding:0; } html, body { height:100%; overflow:hidden; } body { background:#000; text-align:center; /* IE 5.x centering fix */ } #container { width:500px; height:100%; text-align:left; /* return to normal after IE 5.x fix */ margin:0 auto; overflow:auto; /* scrollbars AND wrap floats! */ background:#F60; } Code (markup): On both of these the background color will stretch to full height without scrollbars if the content is shorter than the screen... and show scrollbars if the content is taller - the difference being where the scrollbars are placed. You don't want scrollbars EVER (even when needed) just use the second CSS and change the overflow:auto to overflow:hidden. I suggest AGAINST putting the page scrollbar in a different location than stock - confuses and even annoys some users.