Исправлена ​​ширина, но переменный фон с CSS3

Question

Иногда мне нужно ограничить раздел страницы фиксированной шириной. Но фон должен расширять все доступное пространство.

С CSS2 Я использовал, чтобы сделать что-то вроде этого (jsfiddle: http://jsfiddle.net/fniwes/wwVp4/)

CSS:

#container { background-color: #ddd; } 
#content { width: 300px; margin: 0 auto; } 

HTML:

<div id="container"> 
    <div id="content">All the content inside container should be limited to 300px but the background should cover all the screen width</div> 
</div> 

Содержание здесь это обычный текст, но это обычно нечто более сложное.

Есть ли лучший способ добиться того же результата без дополнительного тега #content? Я не против использования CSS3 или чего-то, что поддерживается только Chrome или Firefox.

Только для уточнения. Я хочу удалить тег #content. Я хочу, чтобы разметка будет

<div id="container"> 
    All the content bla bla 
</div> 

(и я хочу, чтобы стиль не тега, кроме #container .. возможно это не возможно, но, возможно, есть что-то новое в CSS3 или другом предложении, что я не знаю)

Answer 1

Существует функция известково() в CSS3, вы можете использовать его как это:

#container { background-color: #ddd; padding-left: calc(50% - 150px); padding-right:calc(50% - 150px);} 

Answer 2

Есть ли какая-либо конкретная причина, по которой вы против использования контейнера div? Вы можете сделать:

#content { background-color: #ddd; width: 100%; margin: 0; padding: 0 50%; } 

Но я бы не рекомендовал это и лучшее решение по-прежнему использовать контейнеры