Return to Snippet

Revision: 17899
at July 7, 2010 01:23 by mcarneiro


Updated Code
html, body{
	height:100%;
}
.siteWrapper{
	height:100%;
	letter-spacing:-1ex;
	word-spacing:-1ex;
	text-align:center;
	white-space:nowrap;
	font-size:0;
}
	.alignReference,
	.siteAligner{
		display:inline-block;
		#display:inline;
		#zoom:1;
		letter-spacing:0;
		word-spacing:0;
		font-size:12px;
		vertical-align:middle;
	}
		.alignReference{
			height:100%;
			width:1px;
			overflow:hidden;
			margin-left:-1px;
			visibility:hidden;
		}
		.siteAligner{
			text-align:left;
		}
			.siteHolder{
				border: 1px solid red;
				position:relative;
				white-space:normal;
			}
/* html code */
/*
<div class="siteWrapper">
	<div class="alignReference"></div>
	<div class="siteAligner">
		<div class="siteHolder">
			teste 123
		</div>
	</div>
</div>
*/

Revision: 17898
at September 16, 2009 13:55 by mcarneiro


Updated Code
html,body{height:100%; overflow:hidden;padding:0;margin:0;}

.windowWrapper {
	position:absolute;
	top:0;
	height:0;
	overflow:auto;
	text-align:center;
	width:100%;
	height:100%;
}

/* middle align */
.middleHolder,
.middleHolder .middleWrapper,
.middleHolder .middleContent{
	#position: relative;
	zoom:1;
}
.middleHolder{
	display:table;
	height:100%;
	width:100%;
	#width:auto;
	min-width:1002px;
	min-height:594px;
	overflow:hidden;
	_overflow:visible;
}
	.middleHolder .middleWrapper{
		#top: 50%;
		display:table-cell;
		vertical-align:middle;
	}
	.middleHolder .middleContent{
		#top: -50%;
	}

.container {
	margin:0 auto;
	position:relative;
	background-color:pink;
	width:1002px;
	height:594px;
	background:#bfe7ea;
}
/* 
<div class="windowWrapper">
	<div class="middleHolder">
		<div class="middleWrapper">
			
			
			<div class="container middleContent">
				content
			</div>
			
			
		</div>
	</div>
</div>
 */

Revision: 17897
at September 16, 2009 13:44 by mcarneiro


Updated Code
html,body{height:100%; overflow:hidden;}

.windowWrapper {
	position:absolute;
	top:0;
	height:0;
	overflow:auto;
	text-align:center;
	width:100%;
	height:100%;
}

/* middle align */
.middleHolder,
.middleHolder .middleWrapper,
.middleHolder .middleContent{
	#position: relative;
	zoom:1;
}
.middleHolder{
	display:table;
	height:100%;
	width:100%;
	min-width:1002px;
	min-height:594px;
	overflow:hidden;
}
	.middleHolder .middleWrapper{
		#top: 50%;
		display:table-cell;
		vertical-align:middle;
	}
	.middleHolder .middleContent{
		#top: -50%;
	}

.container {
	margin:0 auto;
	position:relative;
	background-color:pink;
	width:1002px;
	height:594px;
	background:#bfe7ea;
}
/* 
<div class="windowWrapper">
	<div class="middleHolder">
		<div class="middleWrapper">
			
			
			<div class="container middleContent">
				content
			</div>
			
			
		</div>
	</div>
</div>
 */

Revision: 17896
at September 16, 2009 13:40 by mcarneiro


Initial Code
/*------------------------------------------Estrutura Geral */
html,body{height:100%; overflow:hidden;}

.windowWrapper {
	position:absolute;
	top:0;
	height:0;
	overflow:auto;
	text-align:center;
	width:100%;
	height:100%;
}

/* middle align */
.middleHolder,
.middleHolder .middleWrapper,
.middleHolder .middleContent{
	#position: relative;
	zoom:1;
}
.middleHolder{
	display:table;
	height:100%;
	width:100%;
	min-width:1002px;
	min-height:594px;
	overflow:hidden;
}
	.middleHolder .middleWrapper{
		#top: 50%;
		display:table-cell;
		vertical-align:middle;
	}
	.middleHolder .middleContent{
		#top: -50%;
	}

.container {
	margin:0 auto;
	position:relative;
	background-color:pink;
	width:1002px;
	height:594px;
	background:#bfe7ea;
}
/* 
<div class="windowWrapper">
	<div class="middleHolder">
		<div class="middleWrapper">
			
			
			<div class="container middleContent">
				content
			</div>
			
			
		</div>
	</div>
</div>
 */

Initial URL

                                

Initial Description
For sites width fixed width and height centered in the screen.
Tested on ie6+, ff3+, opera (buggy, but it works), chrome 2, safari 4.
Remember to use a reset.css: the margin / padding of html and body must be zero.

Initial Title
Base CSS Structure for fixed-size / centered site (using inline-block)

Initial Tags

                                

Initial Language
CSS