Как сосредоточиться на содержании элементов и иметь фон 100%

Question

Я пытаюсь настроить макет, где содержимое (может быть текстовым или любым) находится посередине, а цвет фона или изображение - по всей ширине. Моим решением было создать контейнер-элемент с фоном и дочерний элемент с меньшей шириной и margin: 0 auto;

(http://jsfiddle.net/kp4D8/1/).

Неужели кто-нибудь еще придумал другое обходное решение для такой ситуации, которая проще?

Спасибо, Gasim

Answer 1

Ваш метод, как вы идти об этом и, вероятно, лучший способ.

Один альтернативный метод, который вы могли бы использовать, хотя, если вы хотите использовать минимальную разметку было вырезать <section> элемент и просто применить margin к элементам под .element-container так:

jsFiddle

.element-container * { 
    padding: 5px; 
    width: 50%; 
    text-align: justify; 
    margin: 0 auto; 
} 

.element-container h2 { 
    text-align: right; 
} 

причина, по которой я бы предпочел пойти с вашим оригинальным методом, так что я могу легче стилизовать фон внутреннего элемента и объединить все вместе без использования селектора *.