How to set width of a div to fit the contents?

Question

I have serached all day and I couldn't find a solution to what I want to do. I know there are so many questions with this title, but none of them has worked for me.

What I am trying to do is a touch scrolling for mobile.

Here is my html:

    <body>
    <div id="slider_container"> 
         <div class="wrapper">
             <span>Image</span>
         </div>
    </div>
    </body>

There will be minimum 2 spans containing image and maximum 10 span containing images. There will some php codes and span number will change according to the uploaded photos by the user.

Here is my css code:

body
{
      width:100%;
      overflow-x:hidden;
}

#slider_container
{
width:100%;
height:320px;
overflow: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}

.wrapper
{
position:absolute;
height:320px;
}

.wrapper img
{
max-width:310px;
max-height:310px;
margin-right:5px;
float:left;
}

What I want is to give .wrapper automatic width and overflowing outside of #slider_container and body.

I hope I could tell clearly.

Thanks for all answers...

Does this answer your question? http://stackoverflow.com/questions/450903/make-css-div-width-equal-to-contents — lt.kraken, Oct 09 '13 at 14:24
I have already searched it and it didn't work. Please see my comment to Switchfire's answer. — Hüseyin Dursun, Oct 09 '13 at 14:51

bfavaretto · Accepted Answer · 2013-10-09T18:14:21.127

You'll have to use JavaScript to measure the contents, then set the wrapper's width accordingly. Something like this:

var spans = document.querySelectorAll('.wrapper span');
var width = 0;
for(var i=0; i<spans.length; i++) {
    width += spans[i].offsetWidth + 5; // + 5 for the margins
}
document.querySelector('.wrapper').style.width = width + 'px';

Alternate code for multiple sliders:

var wrappers = document.querySelectorAll('.wrapper');
var width;
for(var i=0; i<wrappers.length; i++) {
    var spans = wrappers[i].querySelectorAll('span');
    width = 0;
    for(var j=0; j<spans.length; j++) {
        width += spans[j].offsetWidth + 5; // + 5 for the margins
    }
    wrappers[i].style.width = width + 'px';
}

http://jsfiddle.net/s4RxE/1

Thanks for your answer. This helped for the first slider on a page. For others it didn't work. So I will change
to
id will be a variable and every slide on a page will have its unique id as number. How should I change the javascript code to make it work for every slide? Thank you very much for your answer but I don't know much about javascript. — Hüseyin Dursun, Oct 09 '13 at 15:03

How to set width of a div to fit the contents?

1 Answers1