блок div отображать снизу

Здравствуйте.

Есть проблемка, которую никак не могу решить. Такая вот конструкция

<style type="text/css">

.all{

padding: 10px;

width:500px;

}



.ban{

overflow: hidden;

padding: 5px;

}

.left{

float: left;

width:300px;

}

.right{

float: left;

width:200px;

}

</style>



<div class="all">



<div class="bot">этот блок с контентом надо отображать разместить тут, а отображать под блоками left и right</div>



<div class="ban">тут слайдер</div>

<div class="left">тут контент</div>

<div class="right">тут тоже конт</div>

</div>



<div style="clear:both"></div>

надо, блок с классом bot отображать внизу, но никак... пробовал сделать position: absolute bottom: 0, но в таком случаи текст наползает на блоки с обтеканием float

Если бы в bot был точный размер высоты, то я нашёл выход с созданием дополнительного пустого блока с заданной в пикселях высотой после right. Но проблема в том, что bot содержит текст, которого может быть много или мало, и всё должно подстраиваться автоматически. Поэтому требуется помощь.