Does that not counteract with this?
}
img {
width: 100px;
height: 100px;
}
-->
Which seems to be the only way to keep the images next to each other and not stacking?
Awfully sorry Wyodor, I have spent the last 24 hours scanning the internet for solutions. Am getting desperate
HTML 1
I can have landscape and portraits next to eachother in one line. However NO scroll Bar.
-------------------------------------------------------------------------------- ----------------------------------------------------------------------------
<style type="text/css">
<!--
#div1 {
width: 4000px;
height: 657px;
overflow: auto;
display : block;
}
#div1 ul {
padding: 0px;
}
#div1 li {
display: inline;
padding: 0px;
}
-->
</style>
<div id="div1">
<ul>
<li><img src="http://farm3.static.flickr.com/2619/5857688760_53938e3bd2_b.jpg" alt="My Image" width="450" height="675" alt="" /></li>
<li><img src="http://farm4.static.flickr.com/3084/5857690208_4a1112dfcf_b.jpg" alt="My Image" width="1013" height="675" alt="" /></li>
<li><img src="http://farm4.static.flickr.com/3108/5857691996_b47a40c367_b.jpg" alt="My Image" width="450" height="675" alt="" /></li>
<li><img src="http://farm3.static.flickr.com/2485/5857693734_db9c8372fa_b.jpg" alt="My Image" width="1013" height="675" alt="" /></li>
<li><img src="http://farm6.static.flickr.com/5062/5597841191_832ea4c2ce_b.jpg" alt="My Image" width="450" height="675" alt="" /></li>
<li><img src="http://farm6.static.flickr.com/5226/5597837761_2905c80f15_b.jpg" alt="My Image" width="450" height="675" alt="" /></li>
<li><img src="image.png" alt="My Image" width="100" height="100" alt="" /></li>
<li><img src="image.png" alt="My Image" width="100" height="100" alt="" /></li>
<li><img src="image.png" alt="My Image" width="100" height="100" alt="" /></li>
</ul>
</div>
-------------------------------------------------------------------------------- ----------------------------------------------------------------------------
HTML 2
Scroll Bar but Images Stacking
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
div {
width: 700px;
height: 700px;
overflow-x: scroll;
overflow-y: hidden;
}
ul {
display :block;
width: 1000px;
height: 800px;
}
li {
float:left;
}
-->
</style>
<div>
<ul>
<li><img src="http://farm4.static.flickr.com/3108/5857691996_b47a40c367_b.jpg" alt="My Image" width="450" height="675" alt="" /> <li>
<li><img src="http://farm3.static.flickr.com/2485/5857693734_db9c8372fa_b.jpg" alt="My Image" width="1013" height="675" alt="" /> <li>
<li><img src="image.png" alt="My Image" /></li>
<li><img src="image.png" alt="My Image" /></li>
<li><img src="image.png" alt="My Image" /></li>
<li><img src="image.png" alt="My Image" /></li>
<li><img src="image.png" alt="My Image" /></li>
<li><img src="image.png" alt="My Image" /></li>
</ul>
</div>
-------------------------------------------------------------------------------- ----------------------------------------------------------------------------