I've been searching all over the internet and I can't find someone duplicating this problem, so I'm perplexed.

I understand that in CSS you can only assign a 100% height if it's nested inside something else with an assigned height. So, the solution most people have put forth is to assign the body and html tags 100% height. Then, you're able to assign a div 100% height because it has something to factor from.

Well, it works. But it's taking things too literal. I can assign my div 100%, but it literally only takes 100% of the window. If you scroll down, the div does not continue. Instead the content spills out into an open page. The div literally is restricted to the size of the window. If scroll down so that you can see the bottom edge of the window, then resize the window, you can see the div resizing in real time.

At first it seemed like maybe it was a problem with floats being cleared. But there are only two objects floating and they're both cleared immediately afterwords.

Here's my CSS as of right now:

html{color:#000;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{font-size:100%;}legend{color:#000;}


html {height:100%}
body{ margin:0 0 0 0; height:100%; min-height:100%; background-color:#454545;background-image:url(images/bg-right.gif); background-repeat:repeat-x; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:12px; letter-spacing:1px; color:#454545;}
a {color:#333; text-decoration:underline;}
a:hover {color:#39F; text-decoration:none;}
.clear {clear:both}


#content {width:1000px; height:100%; }
#left {width:550px; height:100%; float:left; background-color:#FFF; background-image:url(images/bg-bluehaze.gif); background-repeat:repeat-x;}
#right_shadow {width:54px; height:100%; background-image:url(images/bg-rightedge-bottom.gif); background-repeat:repeat-y; float:left;}


#menu {margin: 10px 0 50px 20px; font-size:10px; text-transform:uppercase; letter-spacing:1px;}
#menu ol li {display:inline;}
#menu a {padding:0 5px 0 0; text-decoration:none;}
#menu a:hover {text-decoration:underline;}
#title {margin:0 0 0 20px;}
#twitter {font-size:10px;}


.post {margin: 100px 25px 0 25px;
Does anyone know what's going on here?