images overlapping on each other - html

Question

I am using responsive bootstrap design.
I want to arrange images in rows and columns. But images are overlapping on each other and not sure why.
Here is my code
<div class="container">
<div class="item" style="width: 194px;height:422px;float:left">
<img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
</div>
<div class="item" style="width: 194px;height:422px;float:left">
<img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
</div>
<div class="item" style="width: 194px;height:422px;float:left">
<img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
</div>
</div>
Here is link to Fiddle

Answer 1

You need to limit the size of your images with max-width so they will scale with the size of the parent element.
img {max-width:100%;}
I've updated your fiddle: https://jsfiddle.net/pk1pr96n/38/

Answer 2

Why do you not use css?
.item {
float:left;
}
.container {
width:1050px;
}
https://jsfiddle.net/pk1pr96n/37/
you mean this?
ps. needed to increase the container div because of images size.

Answer 3

Your images are 350px wide, but you define the width style as 194px.
You need this.
<div class="container">
<div class="item" style="width: 350px;height:422px;float:left">
<img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
</div>
<div class="item" style="width: 350px;height:422px;float:left">
<img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
</div>
<div class="item" style="width: 350px;height:422px;float:left">
<img src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
Having said that, this won't actually be responsive because you're defining the image size and not allowing it to be responsive. If you want responsive images, try something like this:
<img src="..." class="img-responsive" alt="Responsive image">
UPDATE with example:
Depending on how you want the images to lay out on mobile devices, you can put each in its own column (eg. .xs-col-4) like this:
<div class="container">
<div class="row">
<div class="item col-xs-4 col-sm-4 col-md-4 col-lg-4" style=";float:left">
<img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
</div>
<div class="item col-xs-4 col-sm-4 col-md-4 col-lg-4" style="float:left">
<img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
</div>
<div class="item col-xs-4 col-sm-4 col-md-4 col-lg-4" style="float:left">
<img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
</div>
</div>
</div>
This will make it so the three images are always side by side regardless of screen size. If you want them to stack on smaller devices, then you can adjust the col-xs-4 etc until you get the result you need.