I know this has been covered here, but it's not working for me. I'm trying to get my container div to have 100% height and be centered. The centering works, but the height only stops where the viewport rendered, not to the full length of my content.
So what am I doing wrong?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> <style type="text/css"> <!-- /* wrapper style for IE 5 Mac */ #container { position:absolute; width:824px; height:100%; visibility:visible; background:#fff; } /* following rules are invisible to IE 5 \*/ #container { text-align:center; margin-top:0px; margin-left:-412px; position:absolute; top:0; left:50%; width:824px; min-height:100%; height:auto; visibility:visible; background:#fff; } html, body { background:#565656; margin:0; padding:0; height:100%; } /* end IE 5 Mac hack */ html, body { background:#565656; margin:0; padding:0; } * html #container { height:100%; } #logo { position:absolute; left:12px; top:0px; width:332px; height:60px; background:#000; } #banner_top { position:absolute; left:344px; top:0px; width:468px; height:60px; backgroundr:#000; } #border_l { position:absolute; left:0px; top:0px; width:12px; height:100%; background:#565656 url(images/shad_l.gif) repeat-y left top; } #border_r { position:absolute; left:812px; top:0px; width:12px; height:100%; background:#565656 url(images/shad_r.gif) repeat-y left top; } #content_left { position:absolute; left:12px; top:110px; width:178px; height:auto; } #content_center { position:absolute; left:200px; top:110px; width:422px; height:auto; } #content_right { position:absolute; left:632px; top:110px; width:178px; height:auto; } #vert_spacer_l { position:absolute; left:190px; top:110px; width:9px; height:auto; background:url(images/vert_spacer.gif) repeat-y left top; } #vert_spacer_r { position:absolute; left:623px; top:110px; width:9px; height:auto; background:url(images/vert_spacer.gif) repeat-y left top; } #nav { position:absolute; left:12px; top:60px; width:800px; height:30px; z-index:100; background:#000; } body,td,th { font-family:"Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif; font-size:11px; color:#333; } --> </style> </head> <body> <div id="container"> <div id="border_l"></div> <div id="border_r"></div> <div id="logo"><img src="images/bbr_logo.gif" alt="bbr logo" width="332" height="60" /></div> <div id="banner_top"><img src="images/banners/9b.gif" alt="nonpoint" width="468" height="60" /></div> <div id="nav"></div> <div id="content_left">left</div> <div id="content_center"><?php include('lorem.inc'); ?></div> <div id="content_right">right</div> <div id="vert_spacer_l"></div> <div id="vert_spacer_r"></div> </div> </body> </html>
Bookmarks