advanced code snippet search

Posted By

stylizedweb on 02/08/08


Tagged

div css align vertical


Versions (?)

Who likes this?

5 people have marked this snippet as a favorite

basicmagic
jonhenshaw
SpinZ
seekup00
isaac


Vertical align div

 / Published in: CSS
 

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

the best solution for vertical align

Expand | Embed | Plain Text 
  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. /* ]]> */

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: gcyrillus on December 11, 2008

Hello ,

I do not agree ,

the real best way to center align one or more block elements in a page(body) is actually to use a real html table structure , it will works then in any browsers (with a minimum css rules) .

The worse is to use negative margin and absolute positionning without min-width and min-height .... just because part of your page can slide of top and left side of your screen with no ways to reach or read it from screen ! (this should never happens !, unless you page is just for google or else search engines )

in between and with css you can have other options : display:table ; display:inline-block and auto margin with absolute positionning . You even have a mix of absolute & relative with negative margin , but really not nice enough in IE7 to talk about ... i leave aside , no need to bring extra confusion :) .

I propose 5 (known i believe) ways to vertical center a page or a block (including table , the most solid solution) I you read french , then go to that page to have an overview : -http://yidille.free.fr/plux/valign/?10-5-pistes-pour-centrer-en-xy-vos-pages

else here are the basic valid (standard render mode) html templates : the single td table : -http://yidille.free.fr/plux/valign/uploads/centre-tableau.html the CSS display:table with IE fixe : -http://yidille.free.fr/plux/valign/uploads/centre-table-css.html (will work in IE 8 without a fix) the inline-block technique (IE

Posted By: gcyrillus on December 11, 2008

sorry , my post has been squezzed for some unknown reason So I repeat and hoppefully add what is missing:

here are the basic valid (standard render mode) html templates : fluide or fixed ' height' content: the single td table : -http://yidille.free.fr/plux/valign/uploads/centre-tableau.html the CSS display:table with IE fixe : -http://yidille.free.fr/plux/valign/uploads/centre-table-css.html (will work in IE 8 without a fix) the inline-block technique (IE very simply fixed) -http://yidille.free.fr/plux/valign/uploads/centre-inline-stack.html

Fixed 'height' content:

auto-margin with absolute positionning (IE alternative) : -http://yidille.free.fr/plux/valign/uploads/centre-position-absolute.html

Negative margin / absolute positionning with min-height & min-width (fixed for IE6) : -http://yidille.free.fr/plux/valign/uploads/centre-position-absolute-marge-negatives.html

Use the browser of your choice to check those poges out :)

Regards and respects GC

You need to login to post a comment.