Una duda sobre selectores, es fácil... pero no me funciona.

[KLAYMAN]

Hola a todos:

Antes de nada daros las gracias por anticipado por leer este mensaje.

Me he leido el libro CSS que me descargué de librosweb.es
Estoy intentando realizar el ejercicio que va del capítulo 3 al 7.

Pues voy a lo que voy, en ese ejercicio utilizan el siguiente código CSS:

Código:

#pie { font-size: .7em; color: #666; }
#pie .enlaces { float: left; }
#pie .enlaces a { color: #666; }

Bien, como veis ese código son enlaces para el pie de una página web.

El caso es que no se que etiquetas tengo que usar en el código HTML porque use la que use me da problemas.

He probado este código:

Código:

<div id="pie">
 
    <div class="enlaces"><a href="#">Nulla</a> | </div>  
    <div class="enlaces"><a href="#">Phuretra</a> | </div> 
    <div class="enlaces"><a href="#">Luctus</a> | </div> 
    <div class="enlaces"><a href="#">Ipsum</a> | </div> 
 
 </div>

Lo que me ocurre que pongo el siguiente código es que se me va hacía abajo la línea y queda por debajo del div del pie. He probado a usar <span class> y mas códigos pero no me va, siempre me hace algo extraño.

¿Alguien me confirma que etiqueta tengo que usar en el HTML, cuando me encuentro con un CSS como este?:

Código:

#pie .enlaces { float: left; }

Un saludo y muchas gracias por adelantado.

[Raulmmmm]

Si se te sale, pon debajo:
<div style="clear:both;"></div>

[elbecerro]

lo lógico es que en lugar de divs uses una lista, porque es eso lo que es, una lista de enlaces:

<div id="pie">
<ul>
<li class="enlaces">Nulla</li>
<li class="enlaces">Phuretra</li>
<li class="enlaces">Luctus</li>
<li class="enlaces">Ipsum</li>
</ul>
</div>

Tambien es conveniente que pongas en el css:

ul {
list-style:none;
}

Luego tendrás que jugar con paddings para separar los elementos de la lista