Image overflow into next line - css

Question

I have the following html:
<div id="thumbs">
...8 image tags width and height of images 100 x 100px
</div>
The related CSS is:
#thumbs
{
overflow:hidden;
float:left;
position:relative;
background-color:white;
height:100px;
width:100%;
}
#thumbs img
{
padding:5px;
}
When I turn my resolution down to the lowest setting -800 x 600, the last image -img8 jumps over to the next line. I would like all the images to show in one line. Is this possible?

Answer 1

You have 8 images equaling 100px wide each. The width of the window is 800px. You also have 5px padding on each image which then makes the whole structure 880px wide. Reduce each image size to 90px and you should be good. Also take into account the scrollbar if there will be scrolling that is another 20-30px.

Answer 2

have you tried setting a min-width on the container
#thumbs {min-width: 880px;}
width derived from 8 x 100px wide images with 10px padding (5px left + 5px right) each.

Answer 3

Have a look at responsive web design techniques that may help.
The problem you have is you're trying to put 880px into a space of 800px, this is 800px for the images then padding of 10px for each image you have in the div giving the additional 80.
The basic solution I would use is to put in a media query like
#media screen and (max-width: 810px) {
#thumbs img {
padding: 3;
height:80px;
width:80px
}
}
What this saying is if the width of the window is under 810px then apply this styling to the elements. Why 810px? To be safe basically.
To keep the consistency of the design we do need to reduce the image sizes and the padding, you will need to play with these variables depending on how they actually look on the screen.