Advanced Search

Centering div without width

/ Published in: CSS
Save to your folder(s)
The idea here is that you contain the content you want to center in two divs, an outer one and an inner one. You float both divs so that their widths automatically shrink to fit your content. Next, you relatively position the outer div with it's right edge in the center of the container. Lastly, you relatively position the inner div the opposite direction by half of its own width (actually the outer div's width, but they are the same). Ultimately that centers the content in whatever container it's in.

Check out the pictures on the website and it'll be clear.

You may need that empty div at the end if you depend on your "product" content to size the height for the "product_container".

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <div class="product_container">
  2.     <div class="outer-center">
  3.         <div class="product inner-center">
  4.         </div>
  5.     </div>
  6.     <div class="clear"></div>
  7. </div>
  8.  
  9.  
  10. .outer-center {
  11.     float: right;
  12.     right: 50%;
  13.     position: relative;
  14. }
  15. .inner-center {
  16.     float: right;
  17.     right: -50%;
  18.     position: relative;
  19. }
  20. .clear {
  21.     clear: both;
  22. }

URL: http://stackoverflow.com/questions/283961/centering-a-div-block-without-the-width

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.