Question

I have a created divs on a row and now when I zoom them, the following divs move down the page. I don’t want them to move to next level, instead I want the HTML width should increase and they should stay at the same level. I have found a jsfiddle for something that I have created for my practice stuff. If you click on the image, they get zoomed and after some zooms, the right hand side image moves down the next level. For me, this should not happen. How to do this?

The link to jsFiddle is: http://jsfiddle.net/bq6Ju/14/
The below code is written by one of the stack overflow scholar, and this is something what I have a similar in my test application

              .flower {
display: block;
float: left;
margin: 10px;
width: 100px;
height: 100px;
overflow: hidden;
border: 1px solid red;
}

.flower img {
width: 100%;
height: 100%;
}
.flower div {
width: 200px;
height: 200px;
position: relative;
}

.chunk2 div {
left: -100px;
}
.chunk3 div {
top: -100px;
}
.chunk4 div {
top: -100px;
left: -100px;
}

The HTML code is

Javascript/Jquery code is

$('div.flower').click(function(){

var resize = 1.30;

var $this = $(this);
var $inner = $this.find('div');

$this.animate({          
    'width': $this.width() * resize,
    'height': $this.width() * resize,   
});

var p = {
    top: parseInt($inner.css('top')),
    left: parseInt($inner.css('left'))
}
console.log(p);
$inner.animate({
    'width': $inner.width() * resize,
    'height': $inner.width() * resize,
    'top': p.top*resize,
    'left': p.left*resize,        
});   

});

Answer 1

You could add a container around the images and prevent wrapping and add scrollbars by the overflow proprty:

.container { overflow: auto; white-space: nowrap; }

Not that in order to get this working I’ve removed the float, because that prevents you AFAIK from doing what you want. And I have changed the display property to inline-block. I’ve also added the vertical-align property to make sure the images are always top aligned.

.flower {
    display: inline-block;
    margin: 10px;
    width: 100px;
    height: 100px;
    overflow: hidden;
    border: 1px solid red;
    vertical-align: top;
}

You can see the demo here: http://jsfiddle.net/bq6Ju/18/