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 6 of 6

Thread: Footer Issues

  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    33
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question Footer Issues

    Hi All,

    I am having some (a lot!) of trouble with getting my footer how I want it. Here is a link: sophieshepherd.com/curt

    What I want is for it to be flush against the bottom of the page. Not necessarily a sticky footer, because I think I'll have enough content on each of the pages to keep it down there.

    Anyway, as it is now, if you reduce the size of the browser window, it floats up. I do not want that. I do want it to slightly overlap with the two Divs above it, and I also want it to 100% of the page width, which is why it is outside of my 960px container.

    Thanks everyone!!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,297
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Just a guess - try putting the footer inside of your container. Move the </div> <!--end container--> down past the last </div> tag and see what that does.

  • #3
    New Coder
    Join Date
    Nov 2008
    Posts
    33
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Just a guess - try putting the footer inside of your container. Move the </div> <!--end container--> down past the last </div> tag and see what that does.
    Hi Sunfighter,

    The problem with that is that the container is 960px wide, and I want the footer to be 100% of the browser window (though the content in the footer will be 960 wide).

    When I do put the footer div in the container however, the same problems remain. The only difference is that the footer gets a fixed width.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,297
    Thanks
    23
    Thanked 612 Times in 611 Posts
    OK I just down loaded your css file change this and it looks good on my computer
    #main{
    width: 660px;
    margin: 80px 0px 0px 300px;
    background: #FFFFFF;
    /*float: right;*/
    /*position:absolute;*/
    padding: 0px 0px 100px 0px;
    border-right: solid 10px #1b334a;
    z-index: 1;

    }

    No need to float the main nor position. It will go where it's suppose to naturally.
    Not sure if you need to clear the footer either.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello sophshep,
    Try making your CSS look like this -
    Code:
    		#container{
    			width: 960px;
    			margin: 0px auto;
    			min-height: 100%;
    overflow: auto;
    /*height:100%*/
    			}
    #main{	
    		width: 660px;
    		margin: 80px 0px 0px 300px;
    		background: #FFFFFF;
    		float: right;
    		position:absolute;
    /*padding: 0px 0px 100px 0px;*/
    padding: 0;
    		border-right:  solid 10px #1b334a;
    		z-index: 1;
    	
    	}	
    	#sidebar {
    		width: 300px;
    /*height: 100%;*/
    		position: relative;	
    		bottom: 0px;	
    		margin: 0px 5px;
    		padding: 0px 0px 100px;
    		float:left;
    		background:url(../images/bg_side.png) repeat #1f3f5f;
    		-moz-box-shadow: 0px 0px 9px #000;
     		-webkit-box-shadow: 0px 0px 9px #000;
     	 	box-shadow: 0px 0px 9px #000;
    		z-index:2;
    		
    	}
    overflow: auto; clears the floats so #main can enclose it's contents. See this explanation on how overflow: auto; clears your floats.

    Removing the height on the other elements lets them expand naturally as well. height: 100%; doesn't usually do what new coders want it to do anyway.
    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

  • Users who have thanked Excavator for this post:

    sophshep (02-12-2011)

  • #6
    New Coder
    Join Date
    Nov 2008
    Posts
    33
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thank you so much excavator, that seems to have done the trick! No more height: 100% for me anymore!!


  •  

    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
    •