How to get footer side by side - html

Question

My footer is one below the other and want it to be side by side. My problem is that it is too much do you have any suggestions how to put in a nice way? it's not the most important side of the site but it is much content and how to put this in a right way?
<h1>Sitemap</h1>
<ul>
<li>Opleiding</li>
<ul>
<li>Visie & Beleid</li>
<li>Opbouw Studieprogramma</li>
<li>Competenties</li>
<li>Diploma</li>
<li>Beroepen</li>
</ul>
<li>Onderwijsprogramma</li>
<ul>
<li>Mededelingen</li>
<li>Uitagenda</li>
<li>Propedeuse</li>
<li>Verdieping 1</li>
<li>Verdieping 2</li>
<li>Afstuderen</li>
</ul>
<li>Organisatie</li>
<ul>
<li>Contact</li>
<li>Blog</li>
<li>Docenten</li>
<li>Onderwijsbureau</li>
<li>Stagebureau</li>
<li>Buitenlandbureau</li>
<li>Examencommissie</li>
<li>Decaan</li>
</ul>
<li>Stages en Projecten</li>
<ul>
<li>Stages</li>
<li>Projecten</li>
</ul>
</ul>
<h1>Contact</h1>
CMD Amsterdam
Bezoekadres: Gebouw Theo Thijssenhuis (TTH), Wibautstraat 2-4, 1091 GM Amsterdam
Postadres: Postbus 1025, 1000 BA Amsterdam
Telefoon: 020 595 1855
Email: info#cmd.hva.nl
RSS: Feed intranet
<h1>Zoeken</h1>
<form>
<input type="text">
<input type="submit">
</form>
<h1>About</h1>
CMD Amsterdam is een ontwerp opleiding voor Interactieve Media.
Op de opleiding Communication & Multimedia Design (CMD) Amsterdam leer je alles over het ontwerpen van online interactieve media. Dit betekent begrijpen, bedenken en maken van interactieve mediatoepassingen zoals websites, mobiele applicaties en interactieve televisie.
<h1>Credits</h1>
© 2007 Hogeschool van Amsterdam - DMCI - CMD Amsterdam
Geef ons feedback
</footer>
CSS!
footer{
width: 100%;
position: absolute;
top: 317%;
left: -10%;
background: lightgrey;
margin:10%;
padding: 2%;
}

Answer 1

footer > ul > li {
width: 20%; /* Make them the right width */
float: left; /* And float them to get them in a line */
}

Answer 2

You have 5 headings in your footer, so I'm guessing you want 5 columns in your footer. I'd put a div around each of your footer sections, and then float them and constrain their widths so they appear side-by-side.
HTML
<footer>
<div class="footer-column">
<h1>Sitemap</h1>
...
</div>
<div class="footer-column">
<h1>Content</h1>
...
</div>
<div class="footer-column">
<h1>Zoeken</h1>
...
</div>
<div class="footer-column">
<h1>About</h1>
...
</div>
<div class="footer-column">
<h1>Credits</h1>
...
</div>
</footer>
CSS
.footer-column {
width: 20%;
float: left;
}
Demo
JSFiddle (Note: This will look terrible on a narrow display).