wrapping span tags inside a div css

Question

I have a couple of div tags nested withing each other and a few span tags nested like below:-

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

Now the issue is that spans overflow their container div tag.Can somebody be kind enough to let me know how to get these spans to be wrapped inside their conatiner div (here the div with the id tagcloud).both the outer divs have a width of 300px specified.

(Additional info- I have done a css reset using the YUI reset-fonts-grids. I am just getting acustomed to CSS .. ) Edit:-The site can be looked at frekshrek.appspot.com ... the tag cloud just does not wrap inside its container div

Answer 1

It sounds like you are floating the spans inside the div container. If this is the case, and you want the 'tagcloud' to contain (wrap) the floated spans then you need to clear the floats by adding the following to the tagcloud CSS:

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

An explanation of this technique can can be found here: http://www.quirksmode.org/css/clearing.html

Answer 2

You have no spaces between your spans, so the browser sees them all as one single long word. If you add a single space or a line break between each span they will be treated as separate words and wrapped accordingly.

Answer 3

Try declaring float: left; on the .mytagcloud class. Something like:

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

in your basiclayout.css file, line 71.