Обтекание текста распространияющееся только внутри определенного блока

Доброе время суток.

Вопрос:
Как сделать чтобы свойство "float: left" распространялось только в пределах одного определенного div?

Описание:
Я задаю два блока div (A и Б). Блок А (меню) обтекается слева, а у блока Б (текст) есть отступ справа => получается два вертикальных блока.
Внутри блока Б я отображаю список состоящий из пары блоков - один изображение, другой текст. Высота изображения и объем текста для изображения каждый раз разные, т.е. в одной паре блоков изображение выше текста, в другой - текста больше.
И еще, изображение в каждом блоке не на одном и том же месте, т.е. может быть справа от текста, может быть слева от текста.

Надо:
Надо чтобы в том списке изображение не наезжало на предыдущий текст и отступ между элементами списка был один и тот же. А если применяю свойство для элементов списка "clear: both;", то вот это свойство применяется и на БЛОК А (меню), что нежелательно.

Тут видел на форуме: чтобы изображение отекалось текстом, можно применить свойство align="left". Может тогда использовать для блоков А и Б float, а для изображений align?

P.S. Надеюсь понятно разъяснил, лучше бы конечно привести пример кода, но просто получится очень большой.

лучше нарисуйте макет из блоков и сразу выделите рамкой блоки и подпишите где какие свойства стоят

 

<div id="A" style="float: right; width: 300px;">

   Тут меню

</div>

 

<div id="B" style="margin-right: 300px;">

   тут сам текст в котором перечень элементов списка состоящих из двух блоков.

 

<!-- Первый эл-нт -->

<div class="img1" style=" float: right">

   <img src="">

</div>

<div>

   Обтекаемый текст

</div>

 

<!-- Второй эл-нт -->

<div class="img2" style=" float: left">

   <img src="">

</div>

<div>

   Обтекаемый текст

</div>

 

<!-- Третий эл-нт -->

<div class="img1" style=" float: right">

   <img src="">

</div>

<div>

   Обтекаемый текст

</div>

 

<!-- И т.д. -->

Здраствуйте, у меня похожая проблема. Нужно сделать так как на картинке, но без использования <table>

Делал так:

<div><img style="float:left">Заголовок 1<br>Текст 1</div><br>
<div><img style="float:left">Заголовок 2<br>Текст 2</div><br>
<div><img style="float:left">Заголовок 3<br>Текст 3</div><br>
<div><img style="float:left">Заголовок 4<br>Текст 4</div><br>
...

Но выходит что каждый следующий див обтекает предыдущую картинку

для картинок достаточно указывать

<img align="left">

поставьте после того как обтекание закончилось

<br clear="both">

тоесть float использовать не надо?

если можно напишите полностью код

<img src="img1.jpg" align="left">text1 text1

<br clear="left">

<img src="img2.jpg" align="left">text2 text2

<br clear="left">

<img src="img3.jpg" align="left">text3 text3

<br clear="left">

в итоге написал так:

<div id="main"><img src="image.jpg" align="left">

<div id="1">текст</div>

<div id="2">текст</div>

<div id="3">текст</div>

<br clear="left">

но возник еще один вопрос: как сделать чтоб содержимое div-а 3 всегда прилегало к нижнему краю div-a main? Пробовал задавать vertical-align:bottom но не помогает

что никто не ответит?

очень,зачастую возникающий вопрос:

<div class="helper">

</div> 

<div class="div1"></div>

...

И вот CSS

.div1 {

display:-moz-inline-box;

display:inline-block;

vertical-align:bottom;

border: 1px #FF0000 dotted;

zoom:1;

}

.helper {

display:-moz-inline-box;

display:inline-block;

vertical-align:middle;

height:100%;

}

Htmlmaster, можете внедрить это в мой пример?

<div id="main"><img src="image.jpg" align="left">
<div id="1">текст</div>
<div id="2">текст</div>
<div id="3">текст</div>
<br clear="left"><hr>

выравниваться к низу должно содержимое дива 3 (прилегать к <hr>)