Making 4 divs in the footer not auto re-size and be centered

Question

Here's the website I'm making;

http://teetime.comeze.com/

The 4 footer DIV elements look fine until you shrink the browser width and then they just start falling off the dang footer.

I've tried a number of combinations but I can't make it stay constant but also centered

Any help would be appreciated.

CSS
.footer {
    background-color: #336600;
    clear: both;
    float: none;
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 0px;
    padding-left: 0px;
    height: 330px;
    color: #F7F7F7;
    width: 100%;
    text-align: center;
}
#third {
    width: 180px;
    float: left;
    text-align: left;
    margin-left: 10px;
}


#first {
    width: 300px;
    float: right;
    overflow: visible;
    margin-right: 10px;
}
#second {
    width: auto;
    float: right;
    margin-top: 8px;
    margin-right: 10px;
    margin-left: 10px;
}

#fourth

Honestly, not sure what to do here, lol! Tried a bunch of different combinations, same result. 

Relevant HTML, Footer is outside of container/content div.

   <div class="footer">
 <div id=third>
   <h1>Site Map
   </h1>
     <p1>
     <a href="/index.html">Home page
</a>  <br><a href="/estimate.htm">Estimate form
</a>  <br>  <p1><a href="/lawncare.htm">Lawn care process
</a> <br>
 <p1><a href="/tree.htm">Tree and Shrub Control
</a> <br>
 <p1><a href="/pestcontrol.htm">Pest Control Services
</a> <br>
 <p1><a href="/landscape.htm">Organic Landscaping </a> <br>
 <p1><a href="/billpay.htm">Secure Online Bill Pay
</a>  <br>
 <p1><a href="/careers.htm">Careers and Team
</a> 
<p1>
<br>
 <p1><a href="/testimony.htm">Customer Testimony and Lawn Gallery
</a> 
<br>

 </div>
  <div id=first><p>
    <h1>Tee Time Lawn Care</h1>
    <p1>23736 W 119th St
Plainfield, IL 60585</p1>
<br>
    <p1> (815) 609-6969</p1>
    <br>
    <br>
   <p2> A local lawn and landscaping company with an emphasis on safe,organic lawn care. Lawn care companies like us will treat your lawn and yard like a golf course so give us a call if your need the best lawn in your neighburhood. </p2>
  </div>
 <div id=second> 
  <h1>Lawn care company service in  Illinois (Il)<br>Chicagoland area:</h1><p2> 
      Naperville lawn care, Naperville landscaping<br>
      Plainfield lawn care, Plainfield landscaping<br>
      Aurora lawn care, Aurora landscaping<br>
     Channahon lawn care, Channahon landscaping<br>
      Osego lawn care, Oswego landscaping<br>
      Shorewood lawn care, Shorewood landscaping<br>
      Bolingbrook lawn care, Bolingbrook landscaping<br>  Barrington lawn care, Barrington landscaping<br>
      And nearby  towns and cities for your yard service needs.
</p2>
  </div><div id=fourth>
  <h1> Our lawn care and landscaping services include:</h1>
 <p2>Organic and granular fertilization, Aeration and seeding, pest control, Tree and Shrub maintenance service, soil conditioning, heat guard, summer recovery, root rejuvenation, winterizng, blanket barrier, mole removal, yard cleaning, lawn and yard mowing, commercial landscaping, weed removal, weed prevention, and more!
 <br> Please contact us for additional services.</p2>
  </div>
  <!-- end .footer -->

</div>

Answer 1

Giving min-width to your div.footer will solve the problem. :)