title: How to stop DIVS from colliding when page resized (footer)?
body: <p>How to stop divs from colliding when page is resized (footer)? I had a look online and I couldn't quite find what I was looking for - so apologies if this question has already been answered. </p>
  
  <p>I'm in the middle of building a footer and I wanted to know how do I stop the four  containing product, company, support, support from colliding with each other when the page is resized. </p>
  
  <p>I assume I need to put min-width in there somewhere, is it best to create a new div with the 4 nested divs and apply a min-width? Would this work if not is there a better way? </p>
  
  <p>I would also like to keep the divs evenly spaced out in the center of the page. </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;footer&gt;
  &lt;div id="insidefooterfixone"&gt;
       &lt;h5&gt;Product&lt;/h5&gt; 
      &lt;ul&gt;
          &lt;li&gt;Domains&lt;/li&gt;
          &lt;li&gt;Hosting&lt;/li&gt;
          &lt;li&gt;Server&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="insidefooterfixtwo"&gt;
       &lt;h5&gt;Company&lt;/h5&gt; 
      &lt;ul&gt;
          &lt;li&gt;Team&lt;/li&gt;
          &lt;li&gt;Our Customers&lt;/li&gt;
          &lt;li&gt;Blog&lt;/li&gt;
          &lt;li&gt;Terms of Service&lt;/li&gt;
          &lt;li&gt;Privacy Policy&lt;/li&gt;
          &lt;li&gt;Security&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="insidefooterfixthree"&gt;
       &lt;h5&gt;Support&lt;/h5&gt; 
      &lt;ul&gt;
          &lt;li&gt;Help Documents&lt;/li&gt;
          &lt;li&gt;API Documents&lt;/li&gt;
          &lt;li&gt;Tutorials&lt;/li&gt;
          &lt;li&gt;FAQ - Database&lt;/li&gt;
          &lt;li&gt;System Status&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="insidefooterfixfour"&gt;
       &lt;h5&gt;Support&lt;/h5&gt; 
      &lt;ul&gt;
          &lt;li&gt;helpdesk@data.co.uk&lt;/li&gt;
          &lt;li&gt;01223 000000&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="disclaimerfix"&gt;
      &lt;p&gt;2002-2014 Dataconnectivity Ltd.&lt;/p&gt;
  &lt;/div&gt;
  &lt;/footer&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>footer {
  margin: 0;
  padding: 0;
  text-align: center;
  width: 100%;
  background-color: #3a3a3a;
  list-style: none;
  height: 450px;  
  float: left;}
  
  #insidefooterfixone h5, #insidefooterfixtwo h5, #insidefooterfixthree h5, #insidefooterfixfour h5 {
  text-align:left;
  margin-bottom: 0;
  color:#FFFFFF;  }
  
  #insidefooterfixone li, #insidefooterfixtwo li, #insidefooterfixthree li,   #insidefooterfixfour li {
  list-style: none;
  text-align: left;
  margin-left: 0;
  color: #C9C9C9; }
  
  #insidefooterfixone ul, #insidefooterfixtwo ul, #insidefooterfixthree ul,     #insidefooterfixfour ul{
  list-style: none;
  text-align: left;
  margin-left: 0;
  color: #C9C9C9; }
  
  #insidefooterfixone {
  position: relative;
  top: 0px;
  left: 31.3%;
  width: 150px;    }
  
  #insidefooterfixtwo {
  position: relative;
  top: -115px;
  left: 39.667%;
  width: 150px;   }
  
  #insidefooterfixthree {
  position: relative;
  top: -298px;
  left: 48%;
  width: 150px;    }
  
  #insidefooterfixfour {
  position: relative;
  top: -458px;
  left: 56.33%;
  width: 150px;}
  </code></pre>
  
  <p>Demo: <a href="http://fiddle.jshell.net/6Lgdx/" rel="nofollow">http://fiddle.jshell.net/6Lgdx/</a></p>
  
  <p>Thanks. </p>
  
  <p>P.S Don't worry about 4 divs aligning (all seems to change when transferred onto another application)</p>