HORROR: using absolute positioning

i am in desperate need of help. i am using absolute positioning, and i have some huge issues.

first, the only way i can get the footer to stick to the bottom is using position: fixed;

this looks cheesy and i just want to footer to stay at the very bottom of the page.

i also have a feeling that there is something really wrong with the structure of CSS. could someone please help, i am still trying to learn!

#wrapper {
min-height: 100%;
/*height: 100%;*/
/*height: auto !important;*/
width: 100%;
background: #FFFFCC;
margin-bottom: -200px;
}

html,body { margin:0; 
padding:0px; 
/*overflow:hidden;*/
background: #FFFFCC;
height: 100%;
/*overflow-y: scroll;*/
/*background-image: url('paper2.jpg');*/
}


#top {
position: absolute; 
top: 0px; 
left: 0px;
width: 100%;
height: 30px;
margin-left: auto;
text-align: center;
background: #000;
color: #8f8f8f;
font: bold 0.8em/1.4 "Palatino Linotype", "lucida grande", tahoma, verdana, arial, sans-serif;
min-width: 750px;
}

#bar {
position: absolute; 
top: 30px; 
left: 0px;
width: 100%;
background-image: url('bgBar.png');
background-repeat: repeat-x;
background-color: #000;
height: 100px;
margin-left: auto;
text-align: center;
min-width: 750px;
}

#black {
position: absolute;
background-color: #000;
height: 100px;
top: 130px; 
left: 0px;
width: 100%;
min-width: 750px;
}
#navBG {
position: absolute;
top: 130px; 
left: 0px;
padding-left: 25%;
width: 100%;
min-width: 750px;
height: 35px;
background-image: url('linkBG.png');
background-repeat: repeat-x;
text-align: center;
z-index: 100;
padding-top: 0px;
}

#flash {
position: absolute;
top: 130px;
}

#page {
position: absolute;
top: 165px;
left: 50%;
/*height: 100%;*/
width: 70%;
min-width: 750px;
margin-left: -35%;
/*margin-left: auto;
margin-right: auto;*/
border: 0px solid #ff9933;
background: #FFCC99 url('shadow.png') 0 0 repeat-x; 
}

#footer {
    position: fixed;
    bottom: 0px;
        /*background: #000;*/
        width: 100%;
        height: 100px;
        background: url('footerBG.png') bottom left repeat-x;
    }

.centerImg {
display: block;
margin-left: auto;
margin-right: auto 
}

    ul#nav {
          /*margin-left: 11em;*/
            text-align: center;
          border: 2px;
          width: 100%; /*For KHTML*/
          list-style: none;
            display: inline;
          height: 35px;
}

     ul#nav li {
          margin-bottom: 5px;
          border: 0;
          padding: 0;
          float: left; /*For Gecko*/
          display: inline;
          list-style: none;
          position: relative;
          height: 24px;
}

     ul#nav ul {
          margin: 0;
          border: 0;
          padding: 0;
            padding-top: 11px;
          width: 160px;
            height: 25px;
          list-style: none;
          display: none;
          position: absolute;
          top: 24px;
          left: 0;
}

     ul#nav ul:after /*From IE 7 lack of compliance*/{
          clear: both;
          display: block;
          font: 1px/0px serif;
          content: ".";
          height: 0;
          visibility: hidden;
}

     ul#nav ul li {
          width: 160px;
          float: left; /*For IE 7 lack of compliance*/
          display: block !important;
          display: inline; /*For IE*/
}

/* Base Menu */
    ul#nav a {
          border: 0px solid #FFF;
            margin-top: 0px;
          padding: 10px 10px 10px 10px;
          float: none !important; /*For Opera*/
          float: left; /*For IE*/
          display: block;
          color: #FFCC66;
          font: bold 0.8em/1.4 arial, verdana, tahoma, sans-serif;
          text-decoration: none;
            text-align: left;
          height: auto !important;
          height: 1%; /*For IE*/
}

/* Base Menu Hover */
    ul#nav a:hover,
    ul#nav li:hover a,
    ul#nav li.iehover a {
          /*background: #ff9933;*/
          color: #FFF;
            background-image: url('linkBG2.png');
            background-repeat: no-repeat;
            background-position: top center;
}

/* Second Menu */
    ul#nav li:hover li a,
  ul#nav li.iehover li a {
          float: none;
          background: #ffffcc;
          color: #686868;
            
            border: 1px solid #ff9933;
}

/* Second Menu Hover */
     ul#nav li:hover li a:hover,
     ul#nav li:hover li:hover a,
     ul#nav li.iehover li a:hover,
     ul#nav li.iehover li.iehover a {
           background: #ffbc79;
          color: #494949;
            
            border: 1px solid #ff9933;
}

/* Third Menu */
     ul#nav li:hover li:hover li a,
     ul#nav li.iehover li.iehover li a {
           background: #ffffcc;
          color: #494949;
}

/* Third Menu Hover */
     ul#nav li:hover li:hover li a:hover,
     ul#nav li:hover li:hover li:hover a,
     ul#nav li.iehover li.iehover li a:hover,
     ul#nav li.iehover li.iehover li.iehover a {
           background: #ffbc79;
          color: #D9D9D9;
}

/* Fourth Menu */
     ul#nav li:hover li:hover li:hover li a,
     ul#nav li.iehover li.iehover li.iehover li a {
           background: #ffffcc;
          color: #D9D9D9;
}

/* Fourth Menu Hover */
     ul#nav li:hover li:hover li:hover li a:hover,
     ul#nav li.iehover li.iehover li.iehover li a:hover {
           background: #ffbc79;
          color: #D9D9D9;
}

     ul#nav ul ul ul,
    ul#nav ul ul ul ul {
          display: none;
          position: absolute;
          top: 0;
          left: 160px;
}

/* PERMANENET */
     ul#nav li:hover ul ul,
     ul#nav li:hover ul ul ul,
     ul#nav li.iehover ul ul,
     ul#nav li.iehover ul ul ul {
           display: none;
}

      ul#nav li:hover ul,
     ul#nav ul li:hover ul,
   ul#nav ul ul li:hover ul,
     ul#nav li.iehover ul,
     ul#nav ul li.iehover ul,
     ul#nav ul ul li.iehover ul {
          display: block;
}

and the html with SAMPLE TEXT!!

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="swfobject.js">swfobject.registerObject("myId", "9.0.0", "expressInstall.swf"); </script>
<title>William Paterson University - Greek Senate</title>
</head>
<body>
<div id="wrapper">
<div id="top">William Paterson University</div>
<div id="bar"><img src="logo.png" class="centerImg" /></div>
<div id="black"></div>
<div id="navBG">
        <ul id="nav"> 
                
                <li><a href="#">Home</a> 
                </li>
                
                <li><a href="#">Our Mission</a>
                </li>
                
                
                <li><a href="#">Events</a>
                </li>
                
                <li><a href="#">Meetings</a>
                </li>
                                
                <li><a href="#">Officers</a>
                </li>
                
                <li><a href="#">History</a>
                </li>
                
                <li><a href="#">Constitution</a> 
                </li>
                
                <li><a href="#">Councils</a> 
                <ul> 
                <li><a href="#">IFC</a></li> 
                <li><a href="#">NPC</a></li>
                <li><a href="#">NPHC</a></li>
                <li><a href="#">UCGC</a></li>
                </ul> 
                </li>
                
                <li><a href="#">Unity</a>
                </li>
                                 
                </ul> 

    </div> <!-- END nav --></div>
        
        
<div id="page">It was thought that Indiana was inhabited by migratory tribes of Native Americans possibly as early as 8000 BC. Radiocarbon dating shows that a tool carved from deer bone, discovered by University of Indianapolis archeologists in 2003, is 10,400 years old. The find supports the growing notion that, in the wake of the most recent Ice Age, humans migrated into Indiana earlier than previously thought.[8] These tribes succeeded one another in dominance for several thousand years. By 900 AD an advanced culture of Mississippians became dominant building large cities of 30,000 inhabitants and massive earthworks in the state. For unknown reasons, their entire civilization disappeared sometime around 1450.[9] The region entered recorded history when the first Europeans came to Indiana and claimed the territory for Kingdom of France during the 1670s. At the conclusion of the French and Indian War and one hundred years of French rule, the region came under the control of the Kingdom of Great Britain. British control was short-lived, as the region was transferred to the newly formed United States at the conclusion of the American Revolutionary War only 20 years later.

At the time the United States took possession of Indiana, there were only two permanent European settlements in the entire territory, Clark's Grant and Vincennes. The United States immediately set to work to develop Indiana. In 1800, the Indiana Territory was established and steadily settled. It was originally placed under the governorship of William Henry Harrison who oversaw the purchase of millions of acres of land from the native tribes and successfully guided the territory through Tecumseh's War and the War of 1812.

Indiana was admitted to the Union in 1816 as the nineteenth state. Following statehood, the new government set out on an ambitious plan to transform Indiana from a wilderness frontier into a developed, well populated, and thriving state. The state's founders initiated a program that led to the construction of roads, canals, railroads, and state funded public schools. The plans nearly bankrupted the state and were a financial disaster, but increased land and produce value more than four-fold. During the 1850s, the state's population grew to exceed one million and the ambitious program of the state founders was finally realized.

During the American Civil War, Indiana became politically influential and played an important role in the affairs of the nation. As the first western state to mobilize for the war, Indiana's soldiers were present in almost every engagement during the war. After the Civil War, Indiana remained important nationally as it became a critical swing state in U.S. Presidential elections, which decided control of the federal government for three decades.[10] Following the Civil War, Indiana industry began to grow and an accelerated rate across the northern part of the state leading to the formation of labor unions and suffrage movements.[11]

The Indiana Gas Boom led to rapid industrialization during the late 19th century. During the early 20th century, Indiana developed into a strong manufacturing state, then experienced setbacks during the Great Depression of the 1930s. The state also saw many developments with the construction of Indianapolis Motor Speedway, the takeoff of the auto industry in the state, substantial urban growth, and two major United States wars.[12] Economic recovery began during World War II and the state continued to enjoy substantial growth. During the second half the of the 20th century, Indiana became a leader in the pharmaceutical industry, as Eli Lilly and other companies settled in the state.[13]

[edit] Geography
See also: Geography of Indiana, List of Indiana rivers, Watersheds of Indiana, and List of counties in Indiana
Typical sign welcoming travelers into Indiana

Indiana is bounded on the north by Lake Michigan and the state of Michigan; on the east by Ohio; on the south by Kentucky, with which it shares the Ohio River as a border; and on the west by Illinois. Indiana is one of the Great Lakes states.

The northern boundary of the states of Ohio, Indiana, and Illinois was originally defined to be a latitudinal line drawn through the southernmost tip of Lake Michigan. Since such a line did not provide Indiana with usable frontage on the lake, its northern border was shifted ten miles (16 km) north when it was granted statehood in 1816.[14]

The 475 mile (764 km) long Wabash River bisects the state from northeast to southwest before flowing south, mostly along the Indiana-Illinois border. The river has given Indiana a few theme songs, such as On the Banks of the Wabash, The Wabash Cannonball and Back Home Again, In Indiana.[15][16] The Wabash is the longest free-flowing river east of the Mississippi, traversing 400 miles (640 km) from the Huntington dam to the Ohio River. The White River (a tributary of the Wabash, which is a tributary of the Ohio) zigzags through central Indiana.

There are 24 Indiana state parks, nine man-made reservoirs, and hundreds of lakes in the state. Areas under the control and protection of the National Park Service or the United States Forest Service include:[17][18]

    * George Rogers Clark National Historical Park in Vincennes
    * Indiana Dunes National Lakeshore near Michigan City
    * Lincoln Boyhood National Memorial in Lincoln City
    * Hoosier National Forest in Bedford

[edit] Northern Indiana
Main articles: Northwest Indiana and Michiana
Indiana Dunes National Lakeshore is located along the southern reach of Lake Michigan.

The northwest corner of the state is part of the Chicago metropolitan area and has nearly one million residents.[19] Gary, and the cities and towns that make up the northern half of Lake, Porter, and La Porte Counties bordering on Lake Michigan, are effectively commuter suburbs of Chicago. Porter and Lake counties are commonly referred to as "The Calumet Region". The name comes from the fact that the Grand Calumet and Little Calumet rivers run through the area. These counties are in the Central Time Zone, the same as Chicago. NICTD owns and operates the South Shore Line, a commuter rail line that runs electric-powered trains between South Bend and Chicago.[20] Sand dunes and heavy industry share the shoreline of Lake Michigan in northern Indiana. Along the shoreline of Lake Michigan in Northern Indiana one can find many parks between the industrial areas. The Indiana Dunes National Lakeshore and the Indiana Dunes State Park are two natural landmarks of the area.

The region is marked with swell and swale topography as it retreats South from Lake Michigan. The ecology changes dramatically between swells, or on opposite sides of the same swell. Plants and animals adapted to marshes are generally found in the swales, while forests or even prickly pear cactus are found in the dryer swells.[21]
Most of northern and central Indiana is flat farmland dotted with small cities and towns, such as North Manchester. Much of Northern Indiana is considered part of Amish Country and holds the nation's second largest population of such people.

The Kankakee River, which winds through northern Indiana, serves somewhat as a demarcating line between suburban northwest Indiana and the rest of the state.[22] Before it was drained and developed for agriculture, the Kankakee Marsh was one of the largest freshwater marshes in the country.[23] South of the Kankakee is a large area of prairie, the eastern edge of the Grand Prairie that covers Iowa and Illinois.[24] The Prairie Chicken and American Bison were common in Indiana's pioneer era, but are now extinct as wild species within the state.

The South Bend metropolitan area, in north central Indiana, is the center of commerce in the region better known as Michiana. Other cities located within the area include Elkhart, Mishawaka, Goshen and Warsaw. Fort Wayne, the state's second largest city, is located in the northeastern part of the state where it serves the state as a transportation hub. Other cities located within the area include Huntington and Marion. East of Fort Wayne is an area of extremely flat land that, before development, was the western-most reach of the Great Black Swamp.[25]

Northeastern Indiana is home to a number of lakes, many of which are the remains of the glaciers that covered Indiana thousands of years ago and Glacial Lake Maumee. Some of these lakes include Lake James in Pokagon State Park, Lake Maxinkuckee, Lake Wawasee and Lake Tippecanoe. Lake Wawasee is the largest natural lake in Indiana, while Lake Tippecanoe is the deepest lake, reaching depths of over 120 feet (37 m). Both lakes are located in Kosciusko County. Chain O' Lakes State Park, located in Noble County, contains 11 lakes, 8 of which are connected by natural channels.

</div>

<div id="footer"><img src="logoBT.png" class="centerImg" /></div>

</div> <!-- end wrapper -->

</body>
</html>

i am pulling hair out by now =(