SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    What does this bit do?

    As I need two header divs for a site, I thought I'd alter one of Paul's sample layout pages to be more in line with what I need.

    http://www.pmob.co.uk/temp/spointfooter.htm

    In it there are two parts which seem strange to me. what do they do and why are they needed?
    Code:
    #outer{
    	min-height:100%;
    	width:760px;
    	background:#fff url(images/spointbg.jpg) repeat-y right top;
    	border-left:1px solid #000;
    	border-right:1px solid #000;
    	color: #000;
    	text-align:left;
    	margin:-22px auto 0;
    }
    * html #outer{height:100%;} /*for IE as it treats height as min-height anyway*/
    #header{
    	width:760px;
    	background:#304a00;
    	border-bottom:1px solid #000;
    	border-top:22px solid #000;
     color: #fff;
    }
    #outer's margin: -22px, to me any way, only seems to be there to cancel out #header's margin: 22px

    Am I missing something subtle here? (I usually do miss the subtle bits...)

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    #outer is 100% high which means it goes all the way from the top to the bottom. If we were to put a footer under #outer then you wouldn't see it because it would be below the fold (below the viewport) which wouldn't be very useful.

    Therefore #outer is moved upwards through the top of the viewport by 22px which is the exact same height as the footer. The footer now pops into view at the bottom of the viewport exactly as we wanted.

    However we no have 22px of #outer disappearing at the top of the viewport so in our next element #header we simply ad a 22px top border to soak up this space and the content then starts exactly in view where we wanted it.

    (BTW This footer technique uses a negative margin-top on #outer whereas some of my other pages use a negative margin bottom to the same effect. When the negative margin is on the bottom then you still have to soak up the extra margin with a clearfooter div or something similar.)

    Hope that makes it clear

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that!

    I had spotted the footer being the same height, but it didn't click in my mind. And as I need a taller footer anyway, I now know all the bits to alter. I'll add a few comments to the css so I don't forget if I use it some time after this site is finished.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    uk
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For anyone following this at home you'll need to add this to the css to make the footer adhere to the bottom of the browsers viewport.


    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    }


    Neat solution.......is it widely supported?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by osgood
    For anyone following this at home you'll need to add this to the css to make the footer adhere to the bottom of the browsers viewport.
    Yes thanks for mentioning that as the code posted in #post 1 is just a snippet and may have confused those watching (the full code can be found in the link on post#1 for anyone that wants to see it.)


    Quote Originally Posted by osgood
    Neat solution.......is it widely supported?
    It will work in all IE versions (ie5.+) and in other browsers almost everywhere as long as the browser supports min-height (which means older safari and IE mac won't like it). However other browsers should just get a normal content height layout with no ill effects (apart from ie5 mac which would probably need extra work but I don't support it anymore ).

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    uk
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It will work in all IE versions (ie5.+) and in other browsers almost everywhere as long as the browser supports min-height (which means older safari and IE mac won't like it). However other browsers should just get a normal content height layout with no ill effects (apart from ie5 mac which would probably need extra work but I don't support it anymore ).
    Cool.

    Mac IE5x is pretty much dead so that does'nt really bother me, nor does older versions of Safari really.

    I'll have to try and retain that solution in my mind. People are always asking about how to keep a footer at the bottom of a page.


Bookmarks

Posting Permissions

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