Is it possible to set the contents of a div to a fixed width with the div at 100%?

HTML & CSS
1

I have a div in which I want the background image to be repeated across the width of the viewport, but I want the content of the div to be fixed at 977 pixels, centered in the div. I don’t think this is possible, but just wanted to pose the question here in case their is a novel css method or trick I have not considered.

So, the div would have no intrinsic width assigned (or 100%), the content should be 977 pixels and the padding, left and right should be auto.

What I’m trying to achieve is have a repeated background image that spreads across the entire width of the viewport, and a second attached image (the logo graphic), which is aligned to the left of the fixed 977 pixel main container.

2

Unless I’m missing something, wouldn’t it be easy enough to have one <div> with a width of 977px, containing the content, inside another <div> with a width of 100% and a background image?

3

Yeah what Stevie said should work. It’s pretty basic.

Two divs. Outer and inner. Outer holds the viewport image. Inner holds content. Inner just needs to be set to 977px width and margin:0 auto;

If you want hte viewport image to be 100% height as well, you’ll need html,body{height:100%} and then set min-height:100% on viewport div.

4

Yep, it sure would :slight_smile:

But…

The markup is fixed. I cannot add/remove divs from the markup. I have to work with what I have.

5

The best you could hope for would be to use a % padding on a div that is 100% width to give that illusion.

However, you wouldn’t be able to get it a true fixed width, it’d always be a bit variable.

Could you apply the background to the body and make it a fixed width div perhaps?