StylizedWeb

Subscribe to our updates:

A Design, WordPress and Tutorials Blog.

Dedicated to helping you learn the art and science of the web.

Vertical align div

One of current CSS left outs is vertical align div. And before CSS 3 comes we have to use some tricks to solve this problem. I looked over for some solutions and it all comes up to defining it as table and using vertical align. The second one appears a lot and it’s a nice solution, but it has two faults, I’ll tell you later about them, here’s the code first.

Idea is to place absolute div 50% left and top and then to move margin left and top half if it’s size.

Vector people

  1.  
  2. .wrapper {
  3. width: 100px;
  4. height: 100px;
  5. position: absolute;
  6. top: 50%;
  7. left: 50%;
  8. margin-left: -50px;
  9. margin-top: -50px;
  10. }
  11.  
Problem?

This works only with defined height and when div height is less then browser height so you can’t have scroll. Now you’ll ask why do anyone want vertical align when there’s a vertical scroll? Well for example you have container height 820px and you have it vertically centered in all larger resolutions, simple.

Solution

In this problem (when browser height is less than div height) at smaller resolutions 1/3 of div is not visible, it’s in negative top margin. So idea is to place some relative div that will prevent div to go into negative margin. Here is the code.

  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. /* ]]> */
  49.  

Only fault is again defined height and it can’t be solved with CSS, not right now, I hope new version will or some JS fix. Click here for demo

Leave a comment on Stylized Web Have some feedback? Leave a comment

108 Comments So Far

  1. By Iggi posted on March 16, 2012 at 4:50 am

    Thanks, man

  2. By shravan posted on April 5, 2012 at 5:46 am

    ok

  3. Hi!
    I found this solution very heplfull!
    (little error in )

    Now,
    if you want and have some time,
    can you also explain the css properties and why you create them?
    I understand the general properties,
    but i dont want to just copy past your solution, i also want to understand the logic :-)

    these are the ones i cant directly understand why:

    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    }

    * {
    margin:0px auto;
    padding:0;
    }

    div#shim {




    float: left;
    }

    div#wrapper {


    clear: both;

    position: relative;

    /* IE4ever Hack: Hide from IE4 **/
    position: static;

    Thanx in advance!
    Greetings

  4. Pingback: 国外转过来十个最好的CSShacks | EvilCode 邪恶代码

  5. it has been 2 days and now i found the solution.
    Thanks for share

  6. One of the best things that you can do when looking for a good car dealer is to simply ask around.
    There are now plenty of companies that deal used cars online.

    Every week, I personally see thousands of cars lined up at the “paint shop” to be repainted.

  7. I leave a response when I appreciate a article on a website or if I have something to add to the conversation.
    It is triggered by the sincerness displayed in
    the article I browsed. And after this post StylizedWeb.com

  8. Pingback: I migliori hack CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>