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 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2012
    Location
    in the uk.
    Posts
    99
    Thanks
    2
    Thanked 6 Times in 4 Posts

    CSS creates white space at foot of site

    CSS, whilst I am OK with most of it, when it comes to some things, I am left wondering what needs to be modified.

    Without posting allot of code, looking at the structure below, how can I make the last div called footer sit at the very bottom of the page leaving zero white space between it and the bottom of the browser?

    In a nutshell, my friends website has been worked on by a developer, all they seemed to have done is mess around with the CSS, add some CSS and remarked other bits out.

    When the page is viewed in full screen mode (F11) the page has an ugly white space at the bottom where none should exist.

    The skeleton below is to help visualize the main structure to the Divs.

    PHP Code:
    <body>
    <
    div id='container'>
       <
    div id='head'some stuff like banner and the sites ears </div>
       <
    div id='content'the body of the display </div>
       <
    div id='footer'closureslinks and legal stuff</div>
    </
    div>
    </
    body
    The style sheet show settings of
    Code:
    #container{
       width: 100%;
       color: #000;
       margin: 0 auto;
       padding: 0;
       font-size: 1.3em;
    }
    
    #header {
      margin-left:auto;
      margin-right:auto;
      margin-top:0px;
      margin-bottom:0px;
      background: url(images/testsite/headerbg_2.jpg) no-repeat top center;
      height:205px;
    }
    
    #content{
            margin:-15px auto 0 auto;
            width:910px;
            color: #000;
    	padding-left: 5px;
            padding-right: 5px;
            padding-bottom:0px;
            padding-top:0px;
    }
    
    
    #footer{
       padding: 1em 1em 13px;
       background: url(uploads/images/bg_footer2.gif) 0 -8px repeat-x;
       color: #666;
       font-size: .9em;
       clear: both;
    	 margin: 0 auto;
    	 border-top: 1px solid #CCC;
       overflow: hidden;
       min-height:100px;
    }
    * html #footer{height:1%}
    The item in bold are what I feel is the root of the problem, the CSS leaves a good 1 inch of white space when the page is in full screen mode but a minimal slither when in browser standard mode and as far as I can make out, the page is not meant to have either, its supposed to spread out across the whole of the screen when in F11 mode and likewise, fit to the window under standard mode.

    Any ideas on where to start carving?

  • #2
    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 Cremator,
    This will put your footer at the bottom -
    Code:
    #footer{
       padding: 1em 1em 13px;
       background: #f00 url(uploads/images/bg_footer2.gif) 0 -8px repeat-x;
       color: #666;
       font-size: .9em;
    	 border-top: 1px solid #CCC;
    	 width: 100%;
       height:100px;
       position: absolute;
       left: 0;
       bottom: 0;
    }
    For more on full height layouts, look at this example.
    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:

    Cremator (02-12-2012)

  • #3
    New Coder
    Join Date
    Jan 2012
    Location
    in the uk.
    Posts
    99
    Thanks
    2
    Thanked 6 Times in 4 Posts
    Thanks, I will pass that info on, see what happens.


  •  

    Posting Permissions

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