Revision: 17899
Updated Code
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
Updated Code
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
Updated Code
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
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
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