Advanced Search

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

/ Published in: CSS
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. html, body{
  2. 	height:100%;
  3. }
  4. .siteWrapper{
  5. 	height:100%;
  6. 	letter-spacing:-1ex;
  7. 	word-spacing:-1ex;
  8. 	text-align:center;
  9. 	white-space:nowrap;
  10. 	font-size:0;
  11. }
  12. 	.alignReference,
  13. 	.siteAligner{
  14. 		display:inline-block;
  15. 		#display:inline;
  16. 		#zoom:1;
  17. 		letter-spacing:0;
  18. 		word-spacing:0;
  19. 		font-size:12px;
  20. 		vertical-align:middle;
  21. 	}
  22. 		.alignReference{
  23. 			height:100%;
  24. 			width:1px;
  25. 			overflow:hidden;
  26. 			margin-left:-1px;
  27. 			visibility:hidden;
  28. 		}
  29. 		.siteAligner{
  30. 			text-align:left;
  31. 		}
  32. 			.siteHolder{
  33. 				border: 1px solid red;
  34. 				position:relative;
  35. 				white-space:normal;
  36. 			}
  37. /* html code */
  38. /*
  39. <div class="siteWrapper">
  40. 	<div class="alignReference"></div>
  41. 	<div class="siteAligner">
  42. 		<div class="siteHolder">
  43. 			teste 123
  44. 		</div>
  45. 	</div>
  46. </div>
  47. */

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.