set div width to content without inline-block and keep divs under each other center aligned

Question

I want some divs to get their width from their content. Display:inline-block does this, but I also want the divs to be under each other, not next to each other as floated.

Using float:left instead of inline-block does this, but I want the divs to be center aligned, not left aligned. How can I do this?

Answer 1

on the parent div put white-space: pre-line; on the child divs add clear : both

#wrapper{ text-align: center; white-space: pre-line; }
#div1, #div2{

    display: inline-block;    
    clear: both;
    border: 1px solid grey;
    margin: 3px auto 3px auto;
    width: auto;

}

<div id="wrapper">
     <div id="div1" class="clearfix">some content here that is bigger</div>
     <div id="div2" class="clearfix">some content here</div>
</div>

http://jsfiddle.net/judsonmusic/8HCWp/