Advanced Search

Vertical align div

/ Published in: CSS
Save to your folder(s)
the best solution for vertical align

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <div id=”shim”/></div>
  2. <div id=”wrapper”>
  3. Content
  4. </div>
  5.  
  6. html, body {
  7. height: 100%;
  8. margin: 0;
  9. padding: 0;
  10. }
  11.  
  12. * {
  13. margin:0px auto;
  14. padding:0;
  15. }
  16.  
  17. div#shim {
  18. visibility: hidden;
  19. width: 100%;
  20. height: 50%;
  21. margin-top: -200px;
  22. float: left;
  23. }
  24.  
  25. div#wrapper {
  26. width: 1000px;
  27. height: 400px;
  28. clear: both;
  29. background:red;
  30. position: relative;
  31. top: -200px;
  32. /* IE4ever Hack: Hide from IE4 **/
  33. position: static;
  34. /** end hack */
  35.  
  36. }
  37.  
  38. /* Hide from IE5mac \*//*/
  39. div#shim {
  40. display: none;
  41. }
  42.  
  43. html, body {
  44. height: auto;
  45. }
  46. /* end hack */
  47.  
  48. /* ]]> */

URL: http://stylizedweb.com/2008/02/01/vertical-align-div/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.