html - Issue in the width of a fixed positioned div -

how make fixed positioned div fit content width?

i've made demo here

before clicking on load button, div must have enough width contain gif image , button.

when more content loaded, width of div must fit width.

here css i've made

body{background: #eee; } #divtocenter{     border-radius: 5px;     box-shadow: 0 0 0 10px rgba(0,0,0,0.2);     background: #fff;     padding: 20px;      position: fixed;     top: 20px;     right: 0;     left: 0;     margin-right: auto;     margin-left: auto;      max-width: 400px; } 

since using javascript/jquery show/hide loader, why don't change width of box via javascript?

you toggle class called .wide instance, achieve desired result follows:

example here

css:

#divtocenter{     /* other declarations... */     text-align: center;     width: 50px; }  #divtocenter.wide {     width: 400px;     text-align: left; } 

jquery:

var $divtocenter = $("#divtocenter");  $("#show-more-data").click(function() {     // ...     $divtocenter.addclass("wide"); });  $("#show-less-data").click(function() {     // ...     $divtocenter.removeclass("wide"); });