I want a banner that goes all the way across the page, but I have unpredictable content(in the form of a table), that will stretch to be more than 100% of the body, and when it goes over, you can see the end of the banner.

http://linxentral.com/test
resize your browser smaller than 1400px and scroll all the way to the right, the green isn't supposed to end.

I need it to fill the whole width of the page, including what overflows from the body.
I would also settle for if it stuck to the page and moved when you scrolled right/left, but it would have to stick to the page when you scrolled the page down, is that possible with CSS?

Set the width of the #banner to 1400px aswell?

Without an explict width set, fits to the viewport.

Originally Posted by lizciz

Set the width of the #banner to 1400px aswell?

that's just an example, the size of the table will change


sounds like it's not possible.

Originally Posted by Skeddles

that's just an example, the size of the table will change

Oh, my mistake.
Well, as you suggested yourself, perhaps a fixed bakground could solve it. I've never used that myself actually, but I *think* it only works for background images.

Otherwise, why not put the table within the banner, so that the table also streches the banner out when it grows beyond the screen? And add a 100px top padding instead of the 100px height.

Or, as another alternative, add a background image to the body, that repeats horizontally. It depends on what you're going to have inside the banner.

I have seen both your problem and the website. I would recommend making one container and then putting the banner and table in the same container. In addition, the width of container needs not to be specified. This way, it is going to expand with the size of the child elements. The width of banner now should be 100% and table may vary. This way you'll have this problem sorted out.

I hope that helps.