Обтекание тегов span внутри div

У меня есть пара тегов div, вложенных друг в друга, и несколько тегов span, как показано ниже: -

<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>

Теперь проблема в том, что span-ы переполняют свой тег div контейнера. Может ли кто-нибудь проявить любезность и сообщить мне, как обернуть эти промежутки внутри своего контейнера div (здесь div с id tagcloud). Оба внешних элемента имеют указанную ширину 300 пикселей.

(Дополнительно info- Я сделал сброс CSS с помощью YUI reset-fonts-grids. Я просто привык к CSS.) Сайт -The можно посмотреть на frekshrek.appspot.com... облако тегов просто делает не заворачивать внутрь контейнера

Ответ 1

Попробуйте объявить float: left; в классе .mytagcloud. Что-то вроде:

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

в вашем файле basiclayout.css, строка 71.

Ответ 2

Другой вариант - просто установить, чтобы ваши теги отображались в строчном блоке:

.mytags {
   display:inline-block;
}

Ответ 3

У вас нет пробелов между вашими интервалами, поэтому браузер видит их как одно длинное слово. Если вы добавите одно пространство или разрыв строки между каждым пролетом, они будут обрабатываться как отдельные слова и соответственно упакованы.

Ответ 4

Похоже, вы плаваете по пролетам внутри контейнера div. Если это так, и вы хотите, чтобы "tagcloud" содержал (wrap) плавающие интервалы, тогда вам нужно очистить поплавки, добавив следующее в tagcloud CSS:

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

Объяснение этой методики можно найти здесь: http://www.quirksmode.org/css/clearing.html