Как сделать позиционирования текста справа от изображения?

Question

[Argentium]

Создаю сайт на тему доставка пиццы . Добавил блок меню с пицами , в нем есть картинка пиццы и справа от нее текст описания продукта . В нормальном разрешении все работает , при изменении ширины браузера текст который должен находится справа уходит под картинку , даже если там достаточно места для переноса строк .

HTML :

<div class="block-pizza">
    <div class="pizza-image"> <img src="img/papperoni.png"  width="256" height="256"> <!-- Добавления картинки -->
    <center><figcaption id = "name-pizza"> Pepperoni </figcaption></center> 
    </div>
          <div class="pizza-desc"> Состав : Томатный соус, томаты, увеличенная порция сыра голландского, колбаса  <!-- Описания пиццы -->
         <p>Вес : ~ 500   гр </p>
         <p>Размер :  30cm (Ø)</p>
          </div>
</div>

CSS :

.block-pizza {
	margin: 2%;
	float: left;
	width: 96%;
	min-height: 500px;
}

.pizza-image {
	float: left;
	min-width: 256px;
	min-height: 256px;
	max-width: 256px;
	max-height: 256px;
}

#name-pizza {
	font-size: 2em;
	color : #FFF600 ;
			text-shadow:  /*  Обводка текста */
		-0   -1px 2px #000000,
		 0   -1px 2px #000000,
		-0    1px 2px #000000,
		 0    1px 2px #000000,
		-1px -0   2px #000000,
		 1px -0   2px #000000,
		-1px  0   2px #000000,
		 1px  0   2px #000000,
		-1px -1px 2px #000000,
		 1px -1px 2px #000000,
		-1px  1px 2px #000000,
		 1px  1px 2px #000000,
		-1px -1px 2px #000000,
		 1px -1px 2px #000000,
		-1px  1px 2px #000000,
		 1px  1px 2px #000000;
}

.pizza-desc {
	min-width: 200px;
	float: left;
	font-weight: bold;
	font-size: 1.2em;
	color : white;
	text-shadow:  /*  Обводка текста */
		-0   -1px 1px #000000,
		 0   -1px 1px #000000,
		-0    1px 1px #000000,
		 0    1px 1px #000000,
		-1px -0   1px #000000,
		 1px -0   1px #000000,
		-1px  0   1px #000000,
		 1px  0   1px #000000,
		-1px -1px 1px #000000,
		 1px -1px 1px #000000,
		-1px  1px 1px #000000,
		 1px  1px 1px #000000,
		-1px -1px 1px #000000,
		 1px -1px 1px #000000,
		-1px  1px 1px #000000,
		 1px  1px 1px #000000;
}

Answer 1

[Argentium]

Все решил ! Нужно было просто убрать float:left из блока .pizza-desc , оставить его только на картинке .

Comments

[Exploding]

Ну-ну)) А на телефоне нормально все? Некчему придраться?))