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.


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.