Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2011
    Location
    Norway
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Background image outside of wrapper with absolute positioning

    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

    Code:
    <div id="wrap">
    
    	<div id="header">
    
    	</div>
    
    	<div id=main_wrapper">
    
    		<div id="main">
    
    		</div>
    
    	</div>
    
    </div>
    
    <div id="footer">
    
    </div>
    CSS

    Code:
    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! :-)

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Oct 2011
    Location
    Norway
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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).

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by andersedvardsen View Post
    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 -
    Code:
    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;*/
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •