HTML Footer CSS Setup - html

Question

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 <ul> and <li>'s, but getting it aligning correctly is a challenge!
This is what it should look like
This is what my version looks like
What I've tried to do is the following: (CSS is below).
<div class="footer">
<div class="wrapper">
<div class="footer_container">
<ul>
<li><strong>Title/header</strong>
<ul>
<li>Adresse, street</li>
<li>Tlf: Phone</li>
</ul>
<ul class="right">
<li>Zipcode/City</li>
<li>Mail: Email</li>
</ul>
</li>
<li><strong>Links</strong>
<ul>
<li>Om skolen</li>
<li>Galleri</li>
</ul>
<ul>
<li>Elever</li>
<li>Forældre</li>
</ul>
<ul class="right">
<li>Kalender</li>
<li>Fag</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
.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; }
I have inserted the 3 images yet as, the 2nd box doesn't look any good.
I'm open to any suggestions/idéas!
Thank you

Answer 1

I would change it up and instead use containers inside the footer instead.
HTML
<div class="footer_container">
<div class="container">
<strong>Title</strong>
<ul>
<li>Adresse</li>
<li>Tlf: Phone</li>
<li>Zipcode/City</li>
<li>Mail: Email</li>
</ul>
</div>
<div class="container">
<strong>Links</strong>
<ul>
<li>Om skolen</li>
<li>Elever</li>
<li>Kalender</li>
<li>Galleri</li>
<li>Forældre</li>
<li>Fag</li>
</ul>
</div>
<div class="container">
Your FB/Twitter things
</div>
</div>​
CSS
.footer_container{
width: 960px;
}
.footer_container strong{
font-weight: bold;
}
.footer_container div.container{
width: 320px;
float: left;
}
.footer_container ul{
list-style: none;
margin: 0;
padding: 0;
}
.footer_container ul li {
width: 160px;
float: left;
}
Demo
Over at jsFiddle.