Posted By

mcarneiro on 09/10/09

Tagged

Versions (?)

Last Edited at 09/10/09 10:21pm

Statistics

Viewed 334 times

Favorited by 2 user(s)

Related snippets

Base CSS structure

/ Published in: CSS

css structure with \"sticky footer\", tested on Internet Explorer 6+, Firefox 3+, Google Chrome 2+, Safari 4+, now for iphone and ipad (fixed bug with page scroll).\r\nRemember to use a reset.css: the margin / padding of html and body must be zero.

Highlighted TextExpand

html{ overflow-x:auto; }
html, body{
	height:100%;
}

/* site width */
.header-holder,
.body-holder,
.footer-holder{
	width:900px;
	margin:0 auto;
}

.main-wrapper{
	min-height:100%;
	position:relative;
	z-index:1;
}
.ie6 .main-wrapper{
	height:100%;
}
	.header-wrapper{
		background:#E9EBB5;
	}
		.header-holder{
			background:#D5D7A4;
		}
	.body-wrapper{
		background:#BAE1FF;
		padding-bottom:100px;
	}
		.body-holder{
			background:#A8CCE9;
		}
.footer-wrapper{
	position:relative;
	z-index:2;
	background:#FFF799;
	margin-top:-80px;
	min-height:80px;
}
.ie6 .footer-wrapper{
	height:80px;
}
	.footer-holder{
		background:#ECE48C;
	}
	
html{
	padding-top:100px;
}
/*


 <body> 
	<div class="main-wrapper">
		<div class="header-wrapper">
			<div class="header-holder">
				header
			</div>
		</div>
		<div class="body-wrapper">
			<div class="body-holder">
				<? for($i=0;$i<100;$i++){?>
				body<br />
				<?}?>
			</div>
		</div>
	</div>
	<div class="footer-wrapper">
		<div class="footer-holder">
			footer
		</div>
	</div>
</body>
*/

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.