etiquetas span envolver dentro de un div

Question

que tienen un par de etiquetas div anidados unos dentro de otros y unos códigos span anidados, como a continuación: -

<div id="leftcol"> 
    <div id="tagcloud"> 
     <span class="mytags"><a href="">tag1</a></span> 
     <span class="mytags"><a href="">tag2</a></span> 
     <!-- and a few more spans of the same type --> 
    </div> 
</div> 

Ahora el problema es que vanos desbordan su etiqueta div contenedor. ¿Puede alguien ser tan amable de decirme cómo hacer que estos tramos se envuelvan dentro de su contenedor div (aquí el div con la identificación tagcloud). Ambos divs externos tienen un ancho de 300px especificado.

(Información adicional- He hecho un reinicio de css usando las YUI reset-fonts-grids. Me estoy acostumbrando a CSS ...) Editar: -El sitio se puede consultar en frekshrek.appspot.com .. .la nube de etiquetas simplemente no se ajusta dentro de su contenedor div

Answer 1

Intente declarar float: left; en la clase .mytagcloud. Algo así como:

.mytagcloud{ 
    float: left; 
    margin: 5px; 
    font-family: 'Reenie Beanie', arial, serif; 
} 

en su archivo basiclayout.css, línea 71.

Answer 2

Parece que está flotando los tramos dentro del contenedor div. Si este es el caso, y desea que el 'tagcloud' para contener (envoltura) las luces flotaban a continuación, es necesario borrar los flotadores añadiendo lo siguiente a la CSS tagcloud:

div.tagcloud { 
    overflow: auto; 
    width: 100%; 
} 

Una explicación de esta técnica puede se puede encontrar aquí: http://www.quirksmode.org/css/clearing.html

Answer 3

No tiene espacios entre sus tramos, por lo que el navegador los ve a todos como una sola palabra larga. Si agrega un espacio único o un salto de línea entre cada tramo, se tratarán como palabras separadas y se envolverán en consecuencia.

Answer 4

Otra opción es simplemente establecer sus etiquetas que se mostrará inline-block:

.mytags { 
    display:inline-block; 
}