Здравствуйте. Столкнулся со следующей проблемой с обтеканием div-ов. На картинках ниже приведено, что есть и что нужно получить. Это у нас есть: (http://itmages.ru/image/view/287959/d5fb3475) А вот так надо: (http://itmages.ru/image/view/287960/4a7d5e0b) Код: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>test</title> <style> .news_main{ font-weight:normal; text-align:left; padding-top: 3px; padding-bottom: 7px; } .news_box{ text-align: left; vertical-align: top; padding: none; height: auto; width: 700px; margin: 0 auto; } .news_box:after{ content:''; display:block; clear:both; } .news_box .text { padding-top: 7px; } .news_box .events_block { float:right; text-align: left; vertical-align: top; height: auto; width: 250px; padding: 0px; margin-left: 7px; margin-bottom: 5px; border:1px solid black; } .news_box .events_block .text { padding: 3px; } .news_box .events_block:after { content: ''; display: block; clear: both; } .news_box .caption { text-align: center; font-weight: bold; } .div5 { text-align: left; vertical-align: top; padding: 3px; padding-left: 5px; height:auto; } .div5:after { content:''; display:block; clear:both; } .div_img { margin-right:7px; margin-bottom:7px; float:left; text-align: left; vertical-align: top; height: auto; } .div_img:after { content:''; display:block; clear:both; } </style> </head> <body> <div class="news_box"> <div class="caption">Caption1</div> <div class="text"> <div class="events_block"> <div class="caption">Caption2</div> <div class="text"> - text2 <br> - text2 <br> - text2 <br> - text2 <br> </div> <div class="caption">Caption3</div> <div class="text"> - text3 <br> - text3 <br> - text3 <br> - text3 <br> </div> </div> <div class="news_main"> Title1<br> <div class="div5"> <div class="div_img"> <img src="http://www.google.ru/images/srpr/logo3w.png" alt="image" width="100px"> </div> Some long text here.Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. Some long text here. </div> </div> <div class="news_main"> Title2<br> Another long text without image. Another long text without image. Another long text without image. Another long text without image. Another long text without image. Another long text without image. Another long text without image. </div> <div class="news_main"> Title3<br> 3. Another long text without image. Another long text without image. Another long text without image. Another long text without image. Another long text without image. </div> </div> </div> </body> </html> Проблема заключается в том, что при вставке картинки, которая обтекается текстом, все идущие дальше записи начинаются только после окончания правого блока. Если картинки нет, то все в порядке. Помогите, пожалуйста, разобраться и сделать правильное обтекание. Если это критично для верстки, хочу обратить внимание на следующее: блок справа может быть произвольной высоты, а слева могут идти подряд несколько записей с картинками. Заранее всем откликнувшимся огромное спасибо!
