Multiple images in a div wthout wrapping?

[evank]

I have a div in which I am placing several images, and by default they wrap so that each one appears below the one before it and they flow vertically downward. What I am wanting to do is to have them NOT wrap, and instead flow horizontally rightward.

I've tried floating all images to the left, and turning off whitespace wrapping, but this doesn't seem to do anything:

<div style="float: left; white-space: nowrap">
<img src="alpha.png">
<img src="bravo.png">
</div>

The only solution I've come across that works is to give the div a specific width:

<div style="6500px;">
<img src="alpha.png">
<img src="bravo.png">
</div>

However, I don't reliably know how wide all the given images will be (or indeed how many images there will be). These will be large images (a photo gallery) and they should extend off the side of the page so that the user can then horizontally scroll through them all. Is there a reliable css way to do this?

[rexibit]

What you are doing is floating the div, not the images inside the div. You should target the images.

.float img {float: left; margin: 0 10px;}

<div class="float">img img img img</div>

That would be the general idea.

[evank]

Good point, don't know how I missed that. However, floating the images doesn't achieve the intended effect either, and actually just floats them outside the containing div while still wrapping them downward

[Troy III]

Hello evank,
What you need, - is a container you already have, and images that will fill the line.

*[ you should consider closing your img tags properly depending on DTD specified.]

If you plan for images to be scrollable with the browser-built horizontal scrollbar. You can use the following CSS:

#yourImageContainer{
	width: /*your desired area width*/;
	height:/*images height, or at least 1px higher than your images */;
	overflow: auto;
	white-space: nowrap; }

It will make your DIV image container display a horizontal scrollbar.

But in case you plan to scroll them with javascript, than overflow:hidden is the way to go.

/inf.:
Images are inline elements. They're allowed to break in a new line, just like text content does, in case it doesn't fit in existing available width.

Regards