Dachiko

Прошу прощения за медленные ответы. Отойдем от приведенного примера. Вот "чистый" пример, как получается, если я делаю предельно "тупо": Хтмл: <div class="block"> <span class="img"> <img src="img/small.jpg" height="150"/> </span> <span class="text"> Немного текста </span> </div> Ксс: .block { background-color: grey; margin: 10px; padding: 10px;} .img { background-color: blue; margin: 10px;} .text {background-color: white;} Видно, что картинка вылазит из своего блока, т.е. он не растягивается. Высота картинки задана в 150px просто для примера, на самом деле я не знаю, какой высоты будет картинка. Если это делать с помощью float, то картинка выпадывает на нижние слои.

Прошу прощения, что не выложил исходник сразу, думал есть какое-то упущенное мной простое решение. Спасибо за терпение и помощь Поудалял всех соседей, оставил только искомый блок. хтмл: <div id="mainBlock"> <div id="mainNewsBlock"> <div class="newsBody"> Тут текст, куда и вставлена выезжающая за пределы блока картинка </div> </div> </div> И вот css body { background: #AABBFF; margin: 10px 50px 10px 50px; font-family: sans-serif; } #mainBlock { margin: 0px 40px 10px 40px; padding: 10px; background: #6688DD; } #mainNewsBlock { background-color: white; margin: 15px 25px 5px 25px; padding: 5px; } .newsBody { background-color: white; color: black; text-align: left; font-size: 1em; padding: 5px 20px 5px 20px; margin: 0px 35px 0px 35px; font-family: arial; }

В css я новичек, и сейчас читаю доки, но пока не могу найти чего-то явно по моей задаче: Как видите, картинка наезжает на все прочие слои. Можно конечно вставить ее в ячейку таблицы, но самое ли это прямое решение? Как-то можно заставить картинку оставаться строго в своем блоке с помощью css? Если возможно, то что бы это не зависело от размера вставляемой картинки.