AdsBot [Google]
New Member
Here is my site: http://mytestsite.nfshost.com/.If you make your browser window thinner, you'll notice that the content in the page's 'body' tag overtakes the 'footer' element. Instead, I'd like it to merely push the 'footer' content down without engulfing it. How do I do that? Below are the relevant sections from the HTML and CSS.\[code\]<html> <head> -- HEAD CONTENT HERE -- </head> <body> <h1>U.S. Neighborhood Income Map</h1> <h2>See how rich or poor every part of every city in America is</h2> <div id="address-form-container"> <span id="form-pretext"> Enter a city name or address and pick a state (Or just a pick a state from the dropdown).</span> <br> <input id="address" type="textbox"> , <select id="state-select"> <input type="button" value="http://stackoverflow.com/questions/13735410/Search"> <br> <span id="note">(NOTE: If loading takes a while, try zooming in or out.)</span> </div> <div id="map-canvas" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"> -- MAP HERE -- </div> <div id="below-map"> <p id="source-note" class="italics"> </div> </body> <footer> <p id="contact">Please send all questions, comments, complaints, and suggestions to [EMAIL ADDRESS]</p> </footer></html>\[/code\]Here's the relevant CSS\[code\]html { float: right; height: 100%; text-align: center; width: 100%;}body { background:url(./images/bg.png); height: 85%; position: relative; right: 8px; width: 100%;}#map-canvas { height: 75%; margin-top: 5px; width: 100%;}footer { margin-top: 3em;}\[/code\]