SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru pinch's Avatar
    Join Date
    Mar 2005
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer Positioning Problem

    I'm using a method of 'sticking' my footer to the bottom of the page as outlined in "The CSS Anthology". The footer is supposed to stick to the bottom of the page, but is supposed to also be 'pushed down' by any content that appears above it.

    This seems to be working fine for the content in my center column, but I also want the content in my left & right columns to also push the footer down. Currently, the footer will appear on top of the left and right columns if the center content isn't tall enough. My left and right columns are positioned using absolute positioning so I'm guessing that this is the reason they are not having an effect on the footer.

    Could someone help me figure out how to ensure that all 3 columns will push down the footer? You can see the website here, and reproduce the problem by decreasing the height of the browser.

  2. #2
    SitePoint Zealot
    Join Date
    Feb 2006
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to use floats. The easiest way to float up a 3 column design is using a wrapper div around two of the columns. Something like this:

    Code:
    <div id="main">
       <div id="content">
       </div>
    
       <div id="sidebar1">
       </div>
    </div>
    
    <div id="sidebar2">
    </div>
    Then you can just float 'em easily enough:

    Code:
    #main { float: right; width: 600px; }
    #sidebar2 { float: left; width: 200px; }
    
    #content { float: left; width: 400px; }
    #sidebar1 { float: right; width: 200px; }
    Then just clear the footer. #footer { clear: both; }

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is indeed the reason why they are not having any effect on the footer. You've completely removed them from the flow so they can't even do anything to other elements on the page.

    wyrd33, there is a better way to float the three columns. It may require the use of relative positioning to set a z-index on the left column depending on where the OP wants the menu to appear in the HTML source though.

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2006
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wyrd33, there is a better way to float the three columns. It may require the use of relative positioning to set a z-index on the left column depending on where the OP wants the menu to appear in the HTML source though.
    There are quite a few ways to set up a 3 column design, I've even seen negative margins used. Although which approach is "better" depends on who you ask.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I personally prefer a combination of floats and negative margins myself. If I'm floating a menu to the left that has the main content area floated left as well, then given a 100&#37; width, and its immediate child being a wrapper DIV that holds the content, then I'd have to give the menu position: relative; and a z-index to make it appear.

    Of course, I do prefer making my HTML markup as modular as possible without having to touch the code (aside from minor additions, such as changing the logo, updating the copyright notice, adding sidebars and intra-page content) when I change designs.

  6. #6
    SitePoint Guru pinch's Avatar
    Join Date
    Mar 2005
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I've managed to fix my footer problem by using the method outlined in the holy grail by A List Part. It fixes my footer problem in both firefox and ie. However, in IE7 (not IE6 or Firefox) my left column is not getting displayed at all. I've been playing around with the padding but still can't get the dang thing to show up. Any ideas?
    Last edited by pinch; Feb 9, 2008 at 14:56.

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's a hasLayout issue. Adding min-height: 0; to the left column would "cure" it in IE 7, though IE 6 does have issues. Also note that tripping hasLayout causes a problem with your orange border as well.

    I tried playing around with the code, but each attempt made me want to rip out all the content (including the scripts) and start over from scratch.

    You might want to consider looking at other ways of making your layouts as well. Here's just one example. (You can see a live copy of it here.)

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>Three Column Layout with Horizontal Main Menu Site Template</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<meta http-equiv="Content-Style-Type" content="text/css" />
    	<meta http-equiv="imagetoolbar" content="no" />
    	<meta name="description" content="A brief description of the current page goes here." />
    	<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished" />
    	<!-- <link rel="stylesheet" type="text/css" href="/styles/screen.css" media="screen,projection" /> -->
    	<style type="text/css" media="screen,projection">
    	
    	html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
    	dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
    	a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
    	strong, sub, sup, textarea, tt, var {
    		margin: 0;
    		padding: 0;
    	}
    
    	html, body {
    		height: 100&#37;;
    	}
    
    	body {
    		background: #EEE;
    		color: #000;
    		font: normal 85%/140% tahoma, verdana, arial, helvetica, sans-serif;
    		letter-spacing: 1px;
    	}
    	
    	h1, h2, h3, h4, h5, h6 {
    		font-family: georgia, garamond, "times new roman", times, serif;
    		font-weight: bold;
    	}
    
    	h1 {
    		background: #FFF;
    		clear: both;
    		color: inherit;
    		font-size: 1.75em;
    		line-height: 1.8em;
    	}
    
    	h2 {
    		border-bottom: 1px solid #000;
    		font-size: 1.25em;
    		line-height: 1.3em;
    		margin-bottom: 0.2em;
    		padding-bottom: 0.25em;
    	}
    
    	h3 {
    		font-size: 1.05em;
    		line-height: 1.1em;
    	}
    
    	h4 {
    		font-size: 0.95em;
    		line-height: 1em;
    	}
    
    	h5 {
    		font-size: 0.85em;
    		line-height: 0.9em;
    	}
    
    	h6 {
    		font-size: 0.75em;
    		line-height: 0.8em;
    	}
    
    	img {
    		border: 0;											/* this squashes a Firefox bug */
    		display: block;										/* this squashes an IE 6 bug */
    	}
    
    	#container {
    		min-height:100%;									/* squashes an IE 7 bug */
    	}
    
    	* html #container {
    		height:100%;										/* IE 5.x and 6 treat height as min-height */
    	}
    		#header {
    			background: #FCF;
    			color: inherit;
    			height: 80px;
    		}
    
    		#wrapper {
    			float: left;
    			padding-bottom: 32px;
    			width: 100%;
    		}
    			#search-form .fieldset {
    				background: #CCC;
    				color: inherit;
    				float: right;
    				height: 2em;
    			}
    
    			* html #search-form .fieldset {
    				position: relative;
    					right: 3px;
    			}
    				#search-form fieldset {
    					border: 0;
    					display: inline;
    					margin: 0;
    					padding: 0;
    				}
    
    				#search-form label, #search-form legend span {
    					position: absolute;
    					left: -999em;
    				}
    
    				#search-form input {
    					float: left;
    					margin: 0.25em;
    					padding: 0 0.4em;
    				}
    
    				#search {
    					width: 8em;
    				}
    
    				* html #search-form .submit {
    					margin: 1px 0 -1px 0;
    					padding: 0;
    				}
    
    				*:first-child+html #search-form .submit {
    					margin-top: 1px;
    					padding: 0;
    				}
    			
    			#menu {
    				background: #CCC;
    				color: inherit;
    				height: 2em;								/* IE Haslayout - fix double margin */
    				line-height: 2em;
    				list-style: none;
    			}
    				#menu li {
    					display: inline;
    					white-space: nowrap;
    				}
    					#menu a {
    						background: #0E0;
    						color: inherit;
    						float: left;
    						height: 2em;
    						margin-right: 1px;
    						padding: 0 0.5em;
    						text-decoration: none;
    					}
    
    					#menu a:active,
    					#menu a:focus,
    					#menu a:hover {
    						background: #FF8;
    						color: #000;
    					}
    
    			#content {
    				float: left;
    				margin-bottom: 0.5em;
    				width: 100%;
    			}
    				#content .wrapper {
    					background: #CCF;
    					color: inherit;
    					font-size: 1em;
    					height: 1%;								/* triggers hasLayout in IE 5/6; ignored by other browsers due to lack of height definition in #content */
    					margin: 0 14.5em 0.5em 14.5em;
    					padding: 0.5em;
    				}
    					#content h2 {
    						background: #CCF;
    						color: inherit;
    					}
    			
    			#sidebar1 {
    				background: #FDD;
    				color: inherit;
    				float: left;
    				margin: 0 0 0.5em -100%;
    				padding: 0.5em 0;
    				width: 14em;
    			}
    				#sidebar1 h2 {
    					background: #FDD;
    					color: inherit;
    					text-align: center;
    				}
    
    				#sidebar1 p {
    					padding: 0 0.5em;
    				}
    
    			#sidebar2 {
    				background: #FFD;
    				color: inherit;
    				float: left;
    				margin: 0 0 0.5em -14em;
    				padding: 0.5em 0;
    				width: 14em;
    			}
    				#sidebar2 h2 {
    					background: #FFD;
    					color: inherit;
    					text-align: center;
    				}
    
    				#sidebar2 p {
    					padding: 0 0.5em;
    				}
    	
    	#footer {
    		background: #8EF;
    		color: inherit;
    		float: left;
    		font: normal 12px/16px tahoma, verdana, arial, helvetica, sans-serif;
    		margin-top: -32px;
    		padding: 8px 0;
    		text-align: center;
    		width: 100%;
    	}
    		#footer em {
    			font-style: normal;
    		}
    
    	</style>
    </head>
    <body>
    <div id="container">
    	<div id="header">
    		<img src="#" width="300" height="80" alt="Web Site Title" />
    	</div>
    	<div id="wrapper">
    		<form action="#" id="search-form" method="get">
    			<div class="fieldset">
    				<fieldset>
    					<legend><span>Search This Site</span></legend>
    					<label for="search">Enter Your Search Terms Here</label> <input type="text" id="search" name="search" size="25" /> 
    					<input type="submit" class="submit" value="Search" />
    				</fieldset>
    			</div>
    		</form>
    		<ul id="menu">
    			<li><a href="#">Menu Item</a></li>
    			<li><a href="#">Menu Item</a></li>
    			<li><a href="#">Menu Item</a></li>
    			<li><a href="#">Menu Item</a></li>
    			<li><a href="#">Menu Item</a></li>
    			<li><a href="#">Menu Item</a></li>
    		</ul>
    		<h1>Web Page Title</h1>
    		<div id="content">
    			<div class="wrapper">
    				<h2>Second Level Heading</h2>
    				<p>
    					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla
    					auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut,
    					lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula,
    					eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in
    					metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in,
    					egestas vel, commodo bibendum, est.
    				</p>
    				<h2>Second Level Heading</h2>
    				<p>
    					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla
    					auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut,
    					lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula,
    					eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in
    					metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in,
    					egestas vel, commodo bibendum, est.
    				</p>
    			</div>
    		</div>
    		<div id="sidebar1">
    			<h2>Sidebar Heading</h2>
    			<p>
    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor
    				consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla
    				scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget
    				pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus.
    				Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas
    				vel, commodo bibendum, est.
    			</p>
    		</div>
    		<div id="sidebar2">
    			<h2>Sidebar Heading</h2>
    			<p>
    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor
    				consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla
    				scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget
    				pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus.
    				Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas
    				vel, commodo bibendum, est.
    			</p>
    		</div>
    	</div>
    </div>
    <div id="footer">
    	<em>
    		Copyright &copy; 2006-2008, The Monster Under the Bed. All Rights to Scare
    		Unsuspecting Children Reserved.
    	</em>
    </div>
    </body>
    </html>

  8. #8
    SitePoint Guru pinch's Avatar
    Join Date
    Mar 2005
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried your suggestion of min-height but the problems seems to persist in IE7. Strangely, even if you examine ALA's example page you'll see that even there the left column disappears in IE7 so I've come to the conclusion that I'm doing it correctly (according to their code), it's just that something is wrong with their solution. Seeing as the article is dated 2006 it's possible that IE7 wasn't yet tested.

    I'm going to give your approach a shot and check back; thanks for the feedback.


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
  •