How to make images go inline vs break to a new line? - html

Question

http://jsfiddle.net/KuFbH/
I am trying to get these 4 images to all be displayed in one line without breaking to the next line. For some reason I can't get it to work although if I zoom out on the page it appears exactly how I want it. What can I do?
I want to be able to scroll horizontally to view them.
HTML
<div id="main">
<div id="scroll">
<div class="Wrapper">
<div class="scrollArea">
<img src="">
<img src="">
<img src="">
<img src="">
</div>
</div>
</div>
</div>
CSS
*{
font-size:100%;
margin: 0px;
padding: 0px;
}
body{
width: 100%;
height: 100%;
}
#main{
position: absolute;
top:100px;
bottom:100px;
left:0;
width: 100%;
background: black;
}
#scroll{
position: relative;
width: 100%;
height: 100%;
}
div.Wrapper{
position: relative;
overflow: auto;
width: 100%;
height: 100%;
}
div.scrollArea{
position: relative;
width: auto;
height: 100%;
}
.scrollArea img{
max-width: 100%;
max-height: 100%;
}
Jquery
var totalWidth = 0;
$('.scrollArea img').each(function(){
totalWidth += parseInt($(this).width(), 10);
});
$('.scrollArea').css("width", totalWidth);

Answer 1

Your images wrap because that's the default behavior for inline elements. If you don't want them to wrap, specify the appropriate behavior on the parent element:
.scrollArea {
white-space: nowrap;
}

Answer 2

try this:
.Wrapper {white-space:nowrap;}
demo here:
http://jsfiddle.net/FEb9L/

Answer 3

Set your image to display: inline-block; in your css stylesheet.