Обтекание текстом.

[segail]

Как сделать чтобы текст block2 (или просто текст) обтекал block1 с права. При превышение количества знаков, текст обтекает block1 с низу. Как показано на рисунке.


СSS Таблица стилей

   .block1 { 

    width: 515px; /* Ширина блока */ 
    height: 315px; /* Высота блока */
    
    background: url("poshta.gif"); /* Цвет фона */

    margin-top: 0px; /* Наружное верхнее поле */
    margin-bottom: 0px; /* Наружное нижние поле */
    padding-top: 75px; /* Внутренне верхнее поле */
    padding-bottom: 0px; /* Внутренне нижнее поле */

    margin-left: 90px; /* Наружный левый отступ */
    margin-right: 0px; /* Наружный правый отступ */
    padding-left: 20px; /* Отступ левый-внутри блока */
    padding-right: 0px; /* Отступ правый-внутри блока */    

    border: solid 0px black; /* Границы блока */ 

    float: left; /* Выравнивает элемент по левому краю, обтекание других элементов с права */ 

   }


   .block2 {
    float: left;
    position: relative; 
   }

Документ HTML

<div class="block1">

</div>


<div class="block2">
Как сделать чтобы текст обтекал block1 с права. При превышение количества знаков, текст обтекает block1 с низу. Как показано на рисунке. 
</div>

[Kotofff]

Попробуйте в CSS для block2 немного поправить:

.block2>.block1 {
    float: left;
    position: relative; 
   }

[segail]

Сделал по другому.
Зачем создавать .block2 когда можно просто написать текст.
Короче получается так.
CSS

   .block1 { 

    float: left; /* Обтекание по правому краю */

    width: 515px; /* Ширина блока */ 
    height: 315px; /* Высота блока */
    

    background: url("poshta.gif"); /* Цвет фона */
    padding-top: 75px; /* Внутренне верхнее поле */
    padding-left: 20px; /* Отступ левый-внутри блока */    
  
    margin-right: 15px;  /* Отступ справа */
    margin-left: 90px;  /* Отступ слева */
    margin-bottom: 0px; /* Наружное нижние поле */


   -moz-box-sizing: border-box; /* Для Firefox */
   -webkit-box-sizing: border-box; /* Для Safari и Chrome */
   box-sizing: border-box; /* Для IE и Opera */

   }

HTML

<div class="block1">

</div>


<p style="padding: 2px 45px 0px 90px;">
<font style="font-size:80%" >
Возникла другая проблема. IE искажает параметр «CSS    .block1 margin-left: 90px;  /* Отступ слева */» увеличивая отступ в несколько раз. Что можно сделать? 
</font>
</p>

Возникла другая проблема. IE искажает параметр «CSS .block1 margin-left: 90px; /* Отступ слева */» увеличивая отступ в несколько раз. Что можно сделать?

[Kotofff]

Это он не margin не переваривает, а float
Попробуйте добавить в .block1 свойство

display: inline;

[segail]

Сообщение от Kotofff

Это он не margin не переваривает, а float
Попробуйте добавить в .block1 свойство

display: inline;

display: inline; помог. В принципе все смотрибельно, за исключением одного нюанса.
Посмотрите на последнюю строчку

Браузер: ИЕ 6, Мазила, Хром.
Показывают одинаковое количество знаков последней строчки текста.

Браузер: Опера.
Показывает по отношению к другим браузерам заниженное количество знаков, последней строчки.


Это естественно, или очередной «касяк»?

p/s
Не думал что ИЕ 6 будет стоять в одном ряду с продвинутыми браузерами…

[Kotofff]

Нет. Не в заниженном количестве знаков дело.
Обратите внимание. Знаки все на месте, ОПЯТЬ отступы и выравнивание по-разному...
Я думаю если не значительный визуальное отличие - то можно опустить.
Это извечная проблема движков браузеров.
Вы правильно поступаете что тестите в разных браузерах - правильный подход.

[segail]

Спасибо за помощь