Background image outside of wrapper with absolute positioning

[andersedvardsen]

Okey, i have a site that has a width of 900px. I use a 900px wide wrapper around the header and main content, but the footer is outside of the wrapper. I use http://www.cssstickyfooter.com/ to get the footer to always stick to the bottom of the page. This is what forces me to use a wrapper (which is the problem in the first place).

in my main content area, i have a DIV main_wrap around a DIV main. I want to set a centered background image to the main_wrap that goes outside of the borders of my 900px wide wrapper (the image is 1920px). To do this i have assigned the wrapper's position to relative, and DIV main_wrap position to absolute (HTML and CSS below). The problem with this solution is that i get a horizontal scrollbar to be able to show the rest of the image when the browser window is under 1920px wide. I do no want that, i just want an image that shows more of itself if you scale browser width.

Since i cannot use a DIV with 100% width inside the wrapper, how can i make this background image behave like if it was assigned to a div with 100% width? I will be glad both to recieve a solution to this problem, or get a totally different setup to do this very same thing! Remember, the footer still needs to stick!

Here is the site: http://www.meyership.no/v2

HTML

<div id="wrap">

	<div id="header">

	</div>

	<div id=main_wrapper">

		<div id="main">

		</div>

	</div>

</div>

<div id="footer">

</div>

CSS

body, html {
	margin: 0px;
	padding: 0px;
	height: 100%;
	background: #D9D9D9 url('images/gradient4.png') repeat-x;   
}
div#wrap {
	width: 900px;
	min-height: 100%;
	margin: 0px auto;
	position: relative;
}
#main_wrap {
	width: 1920px;
	height: 450px;
	background: #f5f5f5 url('images/historiske_streif.jpg') no-repeat center center;
	position: absolute;
	left: -510px;
}
div#main {
	width: 900px;
	min-height: 450px;
	overflow: auto;
	margin: 0px auto;
	padding: 0px 0px 70px 0px;
}
div#footer {
	width: 100%;
	height: 70px;
	position: relative;
	margin: -70px 0px 0px 0px;
	clear: both;
	background: url('images/footer_gradient.png') repeat-x left top;
	border-top: 2px solid #1c1c24;
}

Thanks in advance! :-)

[Excavator]

Hello andersedvardsen
You can make #wrap be 100% width, just make #header900px wide and put your two #sidebars in it (two ids is invalid). Make anything else you need 900px wide as well and center them all with margin: 0 auto;

To center an element you need three things:

1. a valid DocType
2. an element with a width
3. that elements right/left margins set to auto

Instead of the #footer_push method of sticking the footer, have a look at this simpler method.

[andersedvardsen]

Thanks Excavator, that solved it for me :-)

Although i still have a small issue in Opera and Firefox (for OS X). It is a gap on about 35 px below the footer in theese browsers, and i can't seem to figure out why the gap is there. Any thoughts? (I cannot explain the gap more than this, so its best to open the page in Opera or Firefox and look at it).

[Excavator]

Originally Posted by andersedvardsen

Thanks Excavator, that solved it for me :-)

Although i still have a small issue in Opera and Firefox (for OS X). It is a gap on about 35 px below the footer in theese browsers, and i can't seem to figure out why the gap is there. Any thoughts? (I cannot explain the gap more than this, so its best to open the page in Opera or Firefox and look at it).

Have a look at that line-height. See what happens when you comment it out like this -

div#footer {
	width: 100%;
	height: 70px;
	position: absolute;
	bottom: 0px;
	background: url('images/footer_gradient.png') repeat-x left top;
	border-top: 2px solid #1c1c24;
	/*line-height: 103px;*/
}