Сушествует ли возможность указать некие «ссылки» на релевантный блок в html-коде (см. описание)?

Question

[Алексей Николаев]

Здравствуйте!
Верстаю макет, в котором информация идет колонками (то есть правая часть сайта - один продукт, левая - второй, грубо говоря). Но сверстать его собственно двумя колонками требует множества ухищрений, т.к. по дизайну все эти колонки разбиты на строки с различным фоном, и этот фон должен тянуться при растягивании мониторов.
Примерная структура выглядит так:

<div class="row">
   <div><h2>Заголовок товара 1</h2></div>
   <div><h2>Заголовок товара 2</h2></div>
</div>
<div class="row">
   <div>Контент товара 1</div>
   <div>Контент товара 2</div>
</div>

Если верстать так, как я обычно реализовываю подобные дизайны (где каждую секцию представляет собой div со 100% шириной и .container'ом с контентом внутри), семантическая связь между секциями будет неизбежно потеряна. И внимание, вопрос: существует ли способ явно указать на секцию, к которой относится такой-то header? Есть ли такая возможность?

И как бы вы реализовали подобное - без семантичной связи, но красивым html кодом, или с семантичной связью, но с усложнениями верстки?

Спасибо.

Answer 1

[animhotep]

сделай 2 блока по 50% ширины)

Comments

[Алексей Николаев]

Я могу) но проблема в том, что на следующей строке семантическая связь оборвется.

[animhotep]

Алексей Николаев: заголовок 1 контент1 будут в одном блоке, остальные в другом. что ещё нужно для счастья?)

[Алексей Николаев]

animhotep так там фон не получится так реализовать.

[animhotep]

Алексей Николаев: как так? про фон ничего не сказано
если нужно чтобы они тянулись то или таблицей или костылями можно

Answer 2

[Александр Аксентьев]

Примерная структура выглядит так:

<div class="row">
   <div><h2>Заголовок товара 1</h2></div>
   <div><h2>Заголовок товара 2</h2></div>
</div>
<div class="row">
   <div>Контент товара 1</div>
   <div>Контент товара 2</div>
</div>

пожалейте кодеров, за что вы так с ними.