how to keep all floated images in one line? - css

Question

<div id="divT">
<img class="divTimg" src="divT/00.jpg" alt="img">
<img class="divTimg" src="divT/01.jpg" alt="img">
<img class="divTimg" src="divT/02.jpg" alt="img">
<img class="divTimg" src="divT/03.jpg" alt="img">
<img class="divTimg" src="divT/04.jpg" alt="img">
<img class="divTimg" src="divT/05.jpg" alt="img">
<div class="clear"></div>
</div>
css
#divT{
overflow-x:hidden;
}
.divTimg{
float:left;
width:17%;
cursor:pointer;
border-right:2px ridge gold;
}
05.jpg is placed in a new line, bellow the rest of images, but I need to keep them all in one line, and if there is no space enough - the last image should be visible partly.
I tried with various values of overflow-x for the parrent div, but without success.

Answer 1

To achieve the 'scrolling off to the side effect' you need to create a wrapper element, that contains a much wider element that then contains your images. This then allows you to shrink or grow the visible section, while having the hidden content appear scrollable.
<div class="scroll">
<div class="scroll_wrapper">
<img class="scroll_image" src="" />
<img class="scroll_image" src="" />
<img class="scroll_image" src="" />
<img class="scroll_image" src="" />
<img class="scroll_image" src="" />
<img class="scroll_image" src="" />
<img class="scroll_image" src="" />
<img class="scroll_image" src="" />
<img class="scroll_image" src="" />
// images
</div>
</div>
And then the CSS
.scroll {
width: 200px; // how much you want to see at once
overflow: auto;
}
.scroll_wrapper {
width: 600px; // this can be any number higher than the total width of the elements inside it
}
.scroll_image {
background: red;
height: 10px;
width: 50px; // just to test the scrolling
}
The jsfiddle for this can be found here

Answer 2

Just wrap your image list with another wrapper:
<div id="wrapper">
<div id="divT">
<img class="divTimg" src="divT/00.jpg" alt="img">
<img class="divTimg" src="divT/01.jpg" alt="img">
<img class="divTimg" src="divT/02.jpg" alt="img">
<img class="divTimg" src="divT/03.jpg" alt="img">
<img class="divTimg" src="divT/04.jpg" alt="img">
<img class="divTimg" src="divT/05.jpg" alt="omg">
<div class="clear"></div>
</div>
</div>
Add some styles:
#wrapper {
overflow:hidden;
}
#divT {
width:105%;
}