How to create a resizable div according to the size of inner element

Question

I have a parent div (like_user_wrapper) which contains a small image icon inside, here is my code:

<?php

 echo '<div class="like_user_wrapper" id=" '.$post_id.'like_user_wrapper  ">';


 $who_like=getpostdetail($blog_feeds['id'],'who_like');
 $like_user_array=explode(',',$who_like);
 foreach($like_user_array as $name){
    if($name!=''){
        $friend_pic=getfrienddata('profile_pic',$name);
        $f_name=$name;  
        require 'small_friend_message_image.php';
    }
 }

 echo '</div>';
?>

css

.like_user_wrapper{
    margin-top:20px;
    padding:5px; 
    height:30px;
    box-shadow:1px 1px 10px #f0f0f0;
    position:relative;
    background:white;
}

But the width of the wrapper can not be corespondent to the width of the total image.

Answer 1

display: table; is also an option that will still allow you to center the element. (With margin: auto; )

Answer 2

HTML <div> is a block-level element which fills the entire space of its parent (horizontallty) by default.

You could change the default display property of the (parent) element to inline-block or inline , to achieve the effect:

.like_user_wrapper {
    display: inline-block;
    *display: inline;  /* <-- inline-block hack for IE6/7 */
    *zoom: 1;
}