CODEWITHSUNDEEP
htmlcss
Fernando
Fernando

Reputation: 2189

Fixed width but variable background with CSS3

Sometimes, I need to restrict section of a page to a fixed width. But the background should extend all the available space.

With CSS2 I used to do something like this (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>

The content here is just a plain text, but it is usually something more complex.

Is there a better way to accomplish the same result without the extra #content tag? I don't mind using CSS3 or something that is only supported by Chrome or Firefox.

Just for clarification. I want to remove #content tag. I want the markup to be 

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

(and I want to style no tag other than #container.. maybe it is not possible, but maybe there is something new in CSS3 or other proposal that I don't know)

Upvotes: 1

Views: 98

Answers (2)

hdomos
hdomos

Reputation: 1209

There is the calc() function in css3, you can use that like this:

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

Upvotes: 2

jmore009
jmore009

Reputation: 12923

is there any specific reason you are against using a container div? You could do:

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

But I wouldn't reccomend it and the best solution is still to use containers

Upvotes: 0

Related Questions