title: HTML Footer CSS Setup
body: <p>I have wasted too much energy and time trying to create this footer in HTML/CSS, I just can't get it right. I was told the best way of doing this was using <code>&lt;ul&gt;</code> and <code>&lt;li&gt;</code>'s, but getting it aligning correctly is a challenge!</p>
  
  <p>This is what it should look like
  <img src="https://i.stack.imgur.com/k545S.jpg" alt="This is what it should look like"></p>
  
  <p>This is what my version looks like
  <img src="https://i.stack.imgur.com/hhcW8.png" alt="This is what my version looks like"></p>
  
  <p>What I've tried to do is the following: (CSS is below).</p>
  
  <pre><code>&lt;div class="footer"&gt;
          &lt;div class="wrapper"&gt;
              &lt;div class="footer_container"&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;strong&gt;Title/header&lt;/strong&gt;
      &lt;ul&gt;
          &lt;li&gt;Adresse, street&lt;/li&gt;
          &lt;li&gt;Tlf: Phone&lt;/li&gt;
      &lt;/ul&gt;
      &lt;ul class="right"&gt;
          &lt;li&gt;Zipcode/City&lt;/li&gt;
          &lt;li&gt;Mail: Email&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Links&lt;/strong&gt;
      &lt;ul&gt;
          &lt;li&gt;Om skolen&lt;/li&gt;
          &lt;li&gt;Galleri&lt;/li&gt;
      &lt;/ul&gt;
      &lt;ul&gt;
          &lt;li&gt;Elever&lt;/li&gt;
          &lt;li&gt;For&amp;aelig;ldre&lt;/li&gt;
      &lt;/ul&gt;
      &lt;ul class="right"&gt;
          &lt;li&gt;Kalender&lt;/li&gt;
          &lt;li&gt;Fag&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  
      .footer { background:url(images/footer_bg.png) top repeat-x #e4e2de; width:100%; padding:20px 0 30px 0; }
  .footer ul { margin: 0; padding: 0; list-style: none; }
  .footer ul li { display: inline; margin-left: 25px; }
  .footer_container { margin:22px 0 0 0;  }
  
  .footer_container ul { margin:0; padding:0; color:#413f3d; width:100%;  }
  .footer_container ul li { display:inline-block; list-style:none; margin:0; font-size:11px; text-align:left; vertical-align:top; padding:0; width:270px; }
  .footer_container ul li ul { width:120px; float:left; }
  .footer_container ul li ul li { display:block; width:auto; }
  .footer_container ul.right { float:right; }
  </code></pre>
  
  <p>I have inserted the 3 images yet as, the 2nd box doesn't look any good.
  I'm open to any suggestions/idéas!</p>
  
  <p>Thank you</p>