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