Приветствую. Есть адаптивный блок, в котором картинка и описание к ней. Вопрос: как сделать так, чтобы цена, отзывы, и кнопки размер, заказать, сравнить шли сразу друг за другом в правом столбике, чтобы не перекрывался текст и на всех разрешениях экрана все смотрелось аккуратно?
фидл.thumbnail-container {
float:left;
margin-right:30px;
}
.content-description {
float: left;
max-width:300px;
}
.single_variation {
float:right;
}
.rating-box, .product-actions, .variations, .button {
clear:right;
float:right;
}
<div class="product-frame ">
<div class="thumbnail-container">
<a href="#">
<div class="front">
<img width="250" height="250" src="http://www.fragranceoilexpress.com/files/2194097/store/55.jpg">
</div>
</a>
</div>
</div>
<!--/ .thumbnail-container-->
<div class="content-description">
<div class="product-section">
<h3>Неаполитанская пицца</h3>
<form class="cart" method="post">
<div class="single_variation_wrap">
<div class="single_variation"><span class="price"><ins><span class="amount">150.000 руб.</span>
</ins>
</span>
</div>
<div class="rating-box">
<div class="rating readonly-rating" data-score="0" title="Рейтинг еще не присвоен" style="width: 100px;"></div>
<span><a class="to-rating" href="#reviews">0 Отзыв(ы)</a></span>
</div>
<div class="variations_button">
<div class="clear"></div>
<p><strong>Состав и вес блюда</strong>
<br>Состав: <em>лапша яичная, курица, чеснок, лук, соевый соус, индийский орех</em>
<br>
<strong>Порция</strong>: <em>150г.</em>
</p>
<strong>Калорийность</strong>
<br>
<em>Белки(100г): 11,49г.</em>
<br>
<em>Жиры(100г): 22,32г.</em>
<br>
<em>Углеводы(100г): 32,33г.</em>
<br>
<em>Энерг. ценность(100г): 368,39калл.</em>
<table class="variations" cellspacing="0">
<tbody>
<tr>
<td class="label">
<label for="pa_size">Размер</label>
</td>
<td class="value">
<select id="pa_size" name="attribute_pa_size">
<option value="large" selected="selected">бол.</option>
<option value="medium">средн.</option>
<option value="small">мал.</option>
</select>
</td>
</tr>
</tbody>
</table>
<button type="submit" class="button">Заказать</button>
<div class="product-actions"><a href="/catalog/picca/?action" class="compare" data-product_id="3309">Добавить к сравнению</a>
</div>
</div>
</div>
</form>
</div>
</div>
Средний
