SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Absolute positioning within a div

    Hello, I am having difficulties with absolute positioning with a div in order to keep a footer at the bottom of the page. When I view it on a regular screen, it seems to work, but on my laptop, the footer stays at the bottom of the page, and, in fact, does not move down the page at all as I scroll down. It is a widescreen laptop (1200*700 or something like that), and I was wondering how I can solve this.

    The code is as follows:
    Code:
    <head>
    	<title>How to keep footers at the bottom of the page (CSS demo)</title>
    	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    	<meta name="description" content="How to keep footers at the bottom of the page (CSS demo)" />
    	<meta name="keywords" content="How to keep footers at the bottom of the page (CSS demo)" />
    	<meta name="robots" content="index, follow" />
    	<style type="text/css">
    
    	html,
    	body {
    		margin:0;
    		padding:0;
    		height:100&#37;;
    	}
    	#container {
    		min-height:100%;
    		position:relative;
    		height:100%;
    	}
    	#header {
    		background:#ff0;
    		padding:10px;
    	}
    	#body {
    		padding:10px;
    		padding-bottom:60px;	/* Height of the footer */
    	}
    	#footer {
    		position:absolute;
    		bottom:0;
    		width:100%;
    		height:60px;			/* Height of the footer */
    		background:#6cf;
    	}
    
    
        </style>
    
    </head>
    <body>
    
    <div id="container">
    	<div id="header">
    		<!-- Header start -->
    <h1>How to keep footers at the bottom of the page (CSS demo)</h1>
    		<!-- Header end -->
    	</div>
    	<div id="body">
    		<!-- Body start -->
    		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur elementum fermentum urna. Proin lectus. Cras semper tellus tristique nisl. Nullam quis odio. Donec magna tellus, aliquam in, vestibulum in, malesuada sed, neque. Donec ligula. Integer aliquam aliquet dolor. Nulla tempus mattis erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent bibendum lacinia massa. Aenean at tortor id ligula bibendum suscipit. Fusce commodo blandit erat. Cras tincidunt. Ut pellentesque lorem euismod mi. Praesent ut arcu sed massa tincidunt ornare. Quisque semper suscipit erat. Proin tortor leo, condimentum in, rhoncus ac, scelerisque eget, purus. Aliquam vulputate, magna non mollis adipiscing, massa nunc feugiat sem, vitae sollicitudin arcu diam a libero. Fusce sagittis, lectus gravida tempor tristique, magna dolor pharetra nisl, in scelerisque dui magna ut leo. 
    
    Mauris risus odio, varius et, lobortis luctus, euismod eget, massa. Morbi eleifend, est viverra tempus dictum, risus urna hendrerit neque, a dictum enim enim et turpis. Sed vitae nunc quis eros condimentum rhoncus. Vestibulum auctor leo vitae quam. Sed sapien magna, tristique sed, dapibus facilisis, ultrices id, nisi. Duis mollis sodales augue. Donec egestas, tellus commodo aliquet blandit, quam magna dictum erat, sit amet viverra enim est at magna. Vestibulum dapibus mauris ac magna. Sed at eros vel massa suscipit feugiat. Duis fermentum condimentum neque. Sed ut elit at ligula lobortis interdum. Proin euismod velit ut justo. Phasellus aliquam pede in leo luctus eleifend. Vivamus ullamcorper rhoncus dolor. Integer ipsum urna, commodo sit amet, ultrices ut, hendrerit laoreet, neque. In hac habitasse platea dictumst. Morbi faucibus mollis ipsum. Vestibulum aliquet semper sapien. Vivamus lacus eros, sollicitudin nec, adipiscing vitae, gravida eget, tortor. Duis lacinia. 
    
    Cras vel mauris placerat turpis porttitor facilisis. Aenean convallis auctor ligula. Integer gravida erat sit amet enim. Maecenas aliquet congue tortor. Aliquam erat volutpat. Vestibulum ut lorem. Nunc id justo. Vestibulum semper tincidunt pede. Nulla cursus elit accumsan pede. Aliquam aliquam. 
    
    Quisque pretium. Praesent commodo lorem nec eros. Mauris elementum sapien sed augue. Cras dignissim laoreet nunc. Duis in felis quis nunc iaculis pellentesque. Aenean nunc. In rhoncus. Curabitur ultrices consectetuer tellus. Quisque pellentesque mi eu eros. Sed ornare volutpat ante. Aliquam quis est eu ligula suscipit blandit. Fusce consectetuer erat non velit. Fusce vitae tellus ac libero pulvinar posuere. Sed elementum enim quis erat. Nunc mauris lacus, tincidunt ac, sodales ullamcorper, dapibus at, quam. 
    
    Quisque aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ac quam eget leo commodo cursus. Pellentesque aliquet placerat enim. Vivamus eget metus ut ligula tempor egestas. Sed varius ornare lectus. Ut tincidunt luctus velit. Cras nibh. Proin mi. Nullam eros dui, vestibulum non, venenatis ac, pulvinar ac, dui. 
    
    Fusce mattis enim sed arcu. Fusce vitae justo vel neque lacinia malesuada. Aliquam justo nunc, porttitor sed, feugiat vitae, adipiscing semper, tellus. Cras venenatis lacus id justo. Donec volutpat odio a massa. Aenean at orci. Nunc quam mi, vestibulum a, viverra elementum, porta eget, risus. Vestibulum erat. Aliquam a eros ac urna sagittis consequat. Donec lorem. Nullam tristique sapien a libero. Maecenas at dui ac urna ornare volutpat. Suspendisse sagittis purus ut quam. In hac habitasse platea dictumst. Aenean sollicitudin purus vitae erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    
    Mauris pretium lectus interdum neque. Sed eu lorem. Cras felis mauris, porttitor sit amet, euismod id, facilisis eget, nisl. Donec pharetra diam nec justo. Aliquam in odio in urna euismod pharetra. Integer eget sem et enim pretium aliquet. Donec bibendum justo nec urna. Nullam sagittis quam ac justo. Etiam pulvinar luctus ligula. Suspendisse adipiscing turpis a dui. Ut volutpat sollicitudin dolor. Donec ut justo. Nunc pellentesque condimentum ligula. Fusce sollicitudin volutpat nunc. 
    
    Nullam ac metus eget ligula aliquet varius. In hac habitasse platea dictumst. Vivamus ornare, justo eget viverra consequat, orci elit molestie nisl, non pretium nisl enim nec lacus. Donec eleifend nisl facilisis odio. Integer velit. Curabitur quis tellus vel odio pellentesque pulvinar. Vestibulum vehicula tincidunt ante. Ut quis nibh semper nunc blandit vulputate. Nam pharetra, neque vitae cursus porttitor, massa pede fermentum neque, at gravida dolor justo at est. Vestibulum est quam, varius eu, pharetra non, gravida vitae, odio. Vestibulum quis diam nec magna condimentum luctus. 
    
    Donec at nibh. Nullam dui. In hac habitasse platea dictumst. Nulla turpis elit, fermentum ut, pharetra quis, suscipit sit amet, mauris. In accumsan diam id nunc. Aenean id lectus adipiscing nibh convallis ultrices. In a lectus. Donec at augue. Sed odio diam, vehicula sed, fringilla quis, placerat ut, sem. Nulla mauris. 
    
    Nullam fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer vel nisi. Donec arcu neque, aliquet id, dapibus aliquet, facilisis eu, nisl. Nam in dolor sit amet ipsum hendrerit imperdiet. Nulla pretium. Morbi scelerisque odio non ipsum. Morbi faucibus congue lectus. Cras in metus non purus tempor fermentum. Morbi adipiscing, magna non ultricies commodo, risus mauris faucibus arcu, in vestibulum massa justo ultricies ligula. Praesent vitae purus ac mauris porttitor malesuada. Phasellus venenatis arcu. Mauris tempor pulvinar quam. Integer tellus enim, fringilla euismod, malesuada sed, tempor eu, enim. 
    
    Ut facilisis orci nec nibh. Maecenas ultrices orci vel diam. Nam in nisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vitae nibh. Integer egestas, est a aliquet venenatis, diam nibh ornare nisl, eu dignissim metus neque eu leo. Nulla lobortis ultricies felis. Vestibulum sit amet risus. Vestibulum sapien. Proin eget lacus vitae diam vestibulum bibendum. Vestibulum ultrices consectetuer sem. Proin a purus. Aenean interdum risus at quam. Proin mollis posuere erat. Etiam eget justo id metus tincidunt feugiat. Maecenas dictum elit a est. Vivamus iaculis. Fusce malesuada, dui id aliquam iaculis, ligula tellus aliquet augue, vel porta tellus lorem eget turpis. Nunc vel enim a urna volutpat sodales. 
    
    Fusce varius eros in turpis. Integer blandit pulvinar pede. In tempus nisi euismod elit. Proin ultrices bibendum lacus. Etiam volutpat rhoncus ipsum. Maecenas luctus. Nunc sed ligula sed quam imperdiet dictum. Vestibulum tellus tortor, gravida non, rhoncus eget, congue et, arcu. Donec ornare viverra sapien. Quisque semper gravida sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris ac leo. Integer blandit. Sed luctus. Proin sit amet nisl in enim sollicitudin faucibus. Nam libero diam, consectetuer vel, aliquet eget, euismod sed, augue. Cras eu massa sit amet risus venenatis aliquet. Integer pretium nunc sed pede. Nullam nibh. Aenean vitae ante. 
    
    Nullam iaculis sodales justo. Phasellus dignissim dui sed mi. Aenean sed turpis ut mauris elementum iaculis. Nullam magna orci, consectetuer sit amet, accumsan ac, pharetra ut, tortor. Donec dolor urna, malesuada ac, tincidunt nec, porta ut, dolor. Donec fermentum, orci ac faucibus mattis, leo tortor tincidunt neque, eget congue ipsum massa id tortor. Mauris quis tortor. Nullam ac ligula. Cras mi risus, dapibus id, porta ac, posuere nec, mauris. Aliquam bibendum dui quis risus. Morbi sodales placerat erat. Curabitur mollis orci quis est lacinia iaculis. Maecenas erat eros, tempor non, scelerisque sit amet, varius ac, enim. 
    
    Mauris feugiat neque in tortor. Integer ac est ut urna aliquet ullamcorper. Suspendisse sed lectus vel augue iaculis tincidunt. Ut vel mauris at nisi scelerisque laoreet. Fusce cursus, est quis dignissim mollis, felis metus interdum enim, sit amet vehicula mauris nulla nec ante. Aenean arcu turpis, varius vitae, congue at, rhoncus ac, sem. Donec adipiscing tellus a nisi. Vivamus ligula tellus, ullamcorper non, iaculis a, ullamcorper non, velit. Maecenas vehicula diam in sapien commodo tincidunt. Mauris porttitor. Quisque dui. 
    
    Proin cursus, tellus a vehicula blandit, erat ipsum mollis ligula, nec consectetuer quam leo in felis. Sed vitae velit. Proin porttitor lobortis libero. Morbi interdum dolor a nulla viverra fermentum. Curabitur bibendum iaculis nibh. Donec velit justo, viverra in, aliquam vel, gravida ac, justo. Aenean ac leo. Nullam vel enim id neque hendrerit molestie. Aenean mi nunc, sagittis sed, aliquet ac, laoreet ac, est. Proin vulputate, magna ut cursus vehicula, ligula nisi elementum arcu, non egestas velit diam in justo. Cras hendrerit. Curabitur pulvinar fringilla erat. Proin feugiat. Phasellus lacus metus, euismod id, vulputate a, auctor at, ligula. Nulla facilisi. Donec sodales pretium purus. Nam nec tellus. Sed tellus quam, tincidunt id, gravida nec, ornare eget, orci. Donec mi nisi, lobortis vitae, sodales nec, gravida eu, magna. 
     </p>
    <!-- Body end -->
    	</div>
    	<div id="footer">
    		<!-- Footer start -->
    		<p><strong>Footer</strong> (always at the bottom)<p>
    		<!-- Footer end -->
    	</div>
    </div>

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With the 100&#37; height on #container, you have effectively locked it to the screen height and excess content can only flow out the bottom of it and behind the footer. Removing the height will turn this into minimum 100% height layout, where the footer will be at the bottom of the screen unless the amount of content pushes it down (you will have to supply the 100% height to IE6 via a "* html" hack though).

    If you want the footer to stay at the bottom of the screen even if content is longer, and to stay there when scrolling, then you would use fixed position, but this is not supported by IE6.


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
  •