How to make Parent container should contain all children side by side - html

Question

I'm trying to make a horizontal image slider. Lets say there are 6 total images and 3 are displayed at a time. So the width of outer div should be width of 3 images and width of inner div is equal to 6 images so that it can be scrolled using JavaScript, but size of inner div is equal to outer div only.
HTML
<div class="image_slider">
<div class="image_wrapper">
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
</div>
</div>
CSS
.image_slider {
width: 100%;
position: relative;
height: 500px;
overflow: hidden;
}
.image_wrapper {
position: absolute;
height: 500px;
display: inline;
}
.image_wrapper > img {
width: 500px;
height: 500px;
}
fiddle

Answer 1

You should use width:auto,max-width:100%, and white-space:nowrap on .image_slider.
.image_wrapper should be set to width:auto and position:absolute
<style>
.image_slider {
white-space: nowrap;
width: auto;
max-width:100%;
position: relative;
height: 500px;
overflow: hidden;
}
.image_wrapper{
width:auto;
position:absolute;
}
.image_wrapper > img {
width: 500px;
height: 500px;
}
</style>
<div class="image_slider">
<div class="image_wrapper">
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
</div>
</div>

Answer 2

You can calculate the width of img wrapper dynamically with jquery and achieve what you want like below
var width = 0;
$('img').each(function() {
width += $(this).outerWidth();
});
$('.wrapper').width(width + 100);
div {
overflow:hidden;
background: red;
}
img {
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="wrapper">
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
</div>
</div>