Make column in footer

[Nic727]

Hi, I would like to make some column in my footer, but I don't know how to do that. I will share you my code for HTML5 and CSS3 :

<footer>		<div class="sitemap">			<h4>Site map</h4>				<ul>					<li>Introduction</li>					<li>Mise en place</li>					<li>Le formatage</li>					<li>Les couleurs</li>					<li>Les bordures</li>					<li>Structure d'une page</li>					<li>123 - Programmation web</li>				</ul>		</div>		<div class="contact"> 			<h4>Contact</h4>				<p>contact@nicolas-duclos.com</p>		</div>		<div class="copyright"> Copyright © 2014 Nicolas Duclos</div></footer> 

.sitemap li{float: left;list-style: none;}.contact{float: right;}footer{text-align: center;}

I would like to have two columns for the site map and contact.

After that I would like to have my copyright at the bottom.

 

Can you help me plz?

[dsonesuk]

Give class copyright element clear: both;

[Nic727]

Thank you It's almost worked :But I saw some website using display: table-cell; to make column.EDIT:I tried with table-cell and I have something like that : I'm french, so just in case colonne = columnMy HTML5 :

<footer>	<li class="colonne">		<div class="sitemap">			<h4>Site map</h4>				<ul>					<li>Introduction</li>					<li>Mise en place</li>					<li>Le formatage</li>					<li>Les couleurs</li>					<li>Les bordures</li>					<li>Structure d'une page</li>					<li>123 - Programmation web</li>				</ul>		</div>	</li>	<li class="colonne">		<div class="contact"> 			<h4>Contact</h4>				<p><a href="mailto:contact@nicolas-duclos.com">contact@nicolas-duclos.com</a></p>		</div>	</li>		<div class="copyright"> Copyright © 2014 Nicolas Duclos</div></footer> 

My new CSS :

.colonne{display: table-cell;list-style: none;}

Now I just want to have my two column to take all the free space automatically and to be able to add a third column if I want. Edited November 16, 2014 by Nic727

[dsonesuk]

There are several ways to create a column, the problem with the list-items butting together IF that is the problem you are referring to, (as comment 'its almost worked' give us very little in identifying what the result you really wanted) is because you are using float for all the list items li tags, Not! the outer parent element with sitemap class.

[Nic727]

In fact I finished my footer by myself by looking at the website I was looking the CSS. In fact, I just need two or three codes of CSS and it's really easy when I use table-cell.Look my final footer

Edited November 16, 2014 by Nic727