Обтекание изображением

[Joseph Jevelin]

Необходимо выполнить такую задачу:

Причём, чтобы при загрузке картинки (когда её нет) текст не передвигался в левую часть, а оставался неподвижным справа. А дополнительные данные были внизу правого блока. Подскажите, куда копать?

На данный момент, стабильно работающее решение (кривое и без блока доп. данных):

#test {
    background-color: grey;
    margin: 15px 0;
}
    #test .image {
        float: left;
        margin-right: 15px;
        width: 300px; /*чтобы текст не передвигался*/
        height: 150px;
    }
        #test .image img {
            width: 300px; /*уменьшение изображения*/
            height: 150px;
        }
    #test .wrapper {
        padding: 10px 15px 10px 0;
        height: 130px; /*чтобы фон справа всегда был равен высоте изображения*/
    }
        #test .wrapper .title {
            margin-bottom: 15px;
        }

Edited September 12, 2012 by Joseph Jevelin

[Helis]

Блоку с картинкой — float: left;, второму блоку — margin-left на ширину блока с картинкой. Нэ?

[Joseph Jevelin]

Helis, это не сильно исправит кривизну кода) Но, спасибо!

Edited September 12, 2012 by Joseph Jevelin

[hedgehog]

Так?

http://jsfiddle.net/7yWh8/

[Joseph Jevelin]

hedgehog, благодарю)

http://jsfiddle.net/7yWh8/3/

#test {
	background-color: grey;
	overflow: hidden;
	position: relative;
}
	#test img {
		float: left;
		width: 300px;
		height: 150px;
	}
	#test .wrapper {
		margin-left: 315px;
	}
		#test .wrapper .top {
			margin-bottom: 15px;
		}
		#test .wrapper .bottom {
			position: absolute;
			bottom: 0;
		}

Edited September 12, 2012 by Joseph Jevelin