Base CSS structure - CSS Snipplr Social Repository

Revision: 17632

at November 18, 2011 06:29 by mcarneiro

Updated Code

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;
}
/*
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if gt IE 7 ]> <body> <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]-->
	<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>
*/

Revision: 17631

at May 8, 2011 01:14 by mcarneiro

Updated Code

html, body{
	height:100%;
	overflow:auto;
}
body{
	text-align:center;
}

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

.main-wrapper{
	min-height:100%;
	_height:100%;
	position:relative;
	z-index:1;
}
	.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;
	_height:80px;
}
	.footer-holder{
		background:#ECE48C;
	}
/*
	<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>
*/

Revision: 17630

at August 5, 2010 06:55 by mcarneiro

Updated Code

html, body{
	height:100%;
	overflow:auto;
}
body{
	text-align:center;
}

/* site width */
.headerHolder,
.bodyHolder,
.footerHolder{
	width:900px;
	text-align:left;
	padding:1px 0;
	margin:0 auto;
}

.mainWrapper{
	min-height:100%;
	_height:100%;
	position:relative;
	z-index:1;
}
	.headerWrapper{
		background:#E9EBB5;
	}
		.headerHolder{
			background:#D5D7A4;
		}
	.bodyWrapper{
		background:#BAE1FF;
		padding-bottom:100px;
	}
		.bodyHolder{
			background:#A8CCE9;
		}
.footerWrapper{
	position:relative;
	z-index:2;
	background:#FFF799;
	margin-top:-80px;
	min-height:80px;
	_height:80px;
}
	.footerHolder{
		background:#ECE48C;
	}
/*
	<div class="mainWrapper">
		<div class="headerWrapper">
			<div class="headerHolder">
				header
			</div>
		</div>
		<div class="bodyWrapper">
			<div class="bodyHolder">
				<? for($i=0;$i<100;$i++){?>
				body<br />
				<?}?>
			</div>
		</div>
	</div>
	<div class="footerWrapper">
		<div class="footerHolder">
			footer
		</div>
	</div>
*/

Revision: 17629

at September 14, 2009 18:51 by mcarneiro

Updated Code

html, body{
	height:100%;
	overflow:hidden;
}
body{
	text-align:center;
}
.windowWrapper{
	position:absolute;
	z-index:1;
	top:0;
	left:0;
	height:100%;
	width:100%;
	overflow:auto;
}

/* site width */
.headerHolder,
.bodyHolder,
.footerHolder{
	width:900px;
	text-align:left;
	padding:1px 0;
	margin:0 auto;
}

.mainWrapper{
	min-height:100%;
	_height:100%;
	position:relative;
	z-index:1;
}
	.headerWrapper{
		background:#E9EBB5;
	}
		.headerHolder{
			background:#D5D7A4;
		}
	.bodyWrapper{
		background:#BAE1FF;
		padding-bottom:100px;
	}
		.bodyHolder{
			background:#A8CCE9;
		}
.footerWrapper{
	position:relative;
	z-index:2;
	background:#FFF799;
	margin-top:-80px;
	min-height:80px;
	_height:80px;
}
	.footerHolder{
		background:#ECE48C;
	}
/*
	<div class="windowWrapper">
		<div class="mainWrapper">
			<div class="headerWrapper">
				<div class="headerHolder">
					header
				</div>
			</div>
			<div class="bodyWrapper">
				<div class="bodyHolder">
					<? for($i=0;$i<100;$i++){?>
					body<br />
					<?}?>
				</div>
			</div>
		</div>
		<div class="footerWrapper">
			<div class="footerHolder">
				footer
			</div>
		</div>
	</div>
*/

Revision: 17628

at September 10, 2009 22:21 by mcarneiro

Initial Code

html, body{
	height:100%;
	overflow:hidden;
}
body{
	text-align:center;
}
.windowWrapper{
	position:relative;
	z-index:1;
	height:100%;
	overflow:auto;
}

/* site width */
.headerHolder,
.bodyHolder,
.footerHolder{
	width:900px;
	text-align:left;
	padding:1px 0;
	margin:0 auto;
}

.mainWrapper{
	min-height:100%;
	_height:100%;
	position:relative;
	z-index:1;
}
	.headerWrapper{
		background:#E9EBB5;
	}
		.headerHolder{
			background:#D5D7A4;
		}
	.bodyWrapper{
		background:#BAE1FF;
		padding-bottom:100px;
	}
		.bodyHolder{
			background:#A8CCE9;
		}
.footerWrapper{
	position:relative;
	z-index:2;
	background:#FFF799;
	margin-top:-80px;
	min-height:80px;
	_height:80px;
}
	.footerHolder{
		background:#ECE48C;
	}
/*
	<div class="windowWrapper">
		<div class="mainWrapper">
			<div class="headerWrapper">
				<div class="headerHolder">
					header
				</div>
			</div>
			<div class="bodyWrapper">
				<div class="bodyHolder">
					<? for($i=0;$i<100;$i++){?>
					body<br />
					<?}?>
				</div>
			</div>
		</div>
		<div class="footerWrapper">
			<div class="footerHolder">
				footer
			</div>
		</div>
	</div>
*/

Initial URL

Initial Description

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.

Initial Title

Base CSS structure

Initial Tags

Initial Language

CSS

Choose a language for easy browsing: