tigra

а разве не проще, если сделать 1 таблицу, где сразу, у каждого продукта, будут параметры?

id | color | price |  size  | weight  |  other_info

как такое может быть чтобы и то, и другое одновременно? он может выравниваться или по правой стороне text-align:right;
или по ширине text-align:justify;
а если ты хочешь чтобы текст находился в правом углу, то запихивай его в div с фиксированной шириной, блок этот float:right; и выравнивай text-align:right;

на https://jsfiddle.net/ выложи вместе с вёрсткой

ну по идее, если yii, то ajax - это контроллер сам в нём action с именем states это и есть обработчик

Считаю, что книги, следует читать когда ты уже что то знаешь. Лучше смотри видеоуроки на ютубе, быстрее освоишь.
А отрабатывать практику по книге полное извращение.

https://jqueryui.com/datepicker/

просто выноси подобное содержимое layout'a в виджет) и не нужно будет сложных манипуляций проделывать

сталкивался с такой же проблемой, поменял просто местами медиазапросы от большего к меньшему

читай, у них отличная документация на сайте,
я методом тыка находил нужные мне свойства)
www.highcharts.com/demo

ajax подгрузка)

всё просто, в конце функции напиши return false;

тогда сделайте например так.
id вашего блока вставляйте не в саму ссылку а в какой нибудь атрибут.

<a href="#" id-page="first-panel3" class="last-post-title">...text</a>

и при клике по какой либо ссылке, делайте активным блок новости с таким id, который указан в атрибуте у конкретной ссылки

$('.last-posts_list a').click(function () {
       var page = "#"+$(this).attr("id-page");
       $(page).addClass("active");
return false;
});

а в какой конкретно строчке ошибку показывает?
и используй лучше конструкцию не

<?php foreach($formula as $key=>$value) { ?>
.....
<?php } ?>

А вот так

<?php foreach($formula as $key=>$value) : ?>
.....
<?php endforeach; ?>

С конструкцией if так же. Со скобками гораздо проще запутаться, ну и менее читаемо.

$this->widget('zii.widgets.CListView', array(
		'id' => 'ajaxitem',
		'dataProvider' => $dataProvider,
		'itemView' => 'application.views.front._item',
		'ajaxUpdate' => false,
		'emptyText' => '<div class="main-content">Товаров не добавлено</div>',
		'template' => '{items}{pager}',
		'itemsTagName' => 'ul id="og-grid"',
		'htmlOptions' => array('class'=> 'ajaxitem'),
		'itemsCssClass' => 'ajaxitem og-grid',
		'pager' => array(
			'class' => 'ext.infiniteScroll.IasPager',
			'rowSelector' => 'li',
			'listViewId' => 'ajaxitem',
			'header' => '',
			'loaderText' => '<div  style="  clear: both;"><img src="../images/admin/loader.gif" width="46" height="46"/></div>',
			'options' => array('history' => false, 'triggerPageTreshold' => 666, 'trigger' => '',
			'onRenderComplete' => new CJavaScriptExpression('function () {
			  $.getScript("/js/grid.js", function(){
                                  Grid.addItems(???????????);
				   Grid.init();
			      });
			}'),
			),
		),
	));

проще: всего запилить качественной картинкой jpg.
сложнее: сделать блоки с текстом и абсолютно их позиционаровать
сложно и нудно: текстовые блоки абсолютно позиционировать и линии эти цеплять к блокам псевдоэлементами

просто инициализируешь 2 fancybox.

<div id="modal1"></div>
<div id="modal2"></div>

<script>
$('#modal1').fancybox();
$('#modal2').fancybox();
</script>

и при клике вызываешь их оба