Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 8500

Jul 20th, 2008

Multiple images in a div wthout wrapping?

Expand Post »

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:

HTML and CSS Syntax (Toggle Plain Text)
<div style="float: left; white-space: nowrap">
<img src="alpha.png">
<img src="bravo.png">
</div>
<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:

HTML and CSS Syntax (Toggle Plain Text)
<div style="6500px;">
<img src="alpha.png">
<img src="bravo.png">
</div>
<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?

Last edited by evank; Jul 20th, 2008 at 12:21 am.

evank

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

14 posts
since Dec 2006

Permalink

Jul 20th, 2008

Re: Multiple images in a div wthout wrapping?

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

HTML and CSS Syntax (Toggle Plain Text)
.float img {float: left; margin: 0 10px;}
 
<div class="float">img img img img</div>
.float img {float: left; margin: 0 10px;}

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

That would be the general idea.

rexibit

Reputation Points: 15

Solved Threads: 4

Junior Poster in Training

Offline

55 posts
since Jun 2008

Permalink

Jul 20th, 2008

Re: Multiple images in a div wthout wrapping?

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

evank

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

14 posts
since Dec 2006

Permalink

Jul 20th, 2008

Re: Multiple images in a div wthout wrapping?

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:

HTML and CSS Syntax (Toggle Plain Text)

#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

Troy III

Reputation Points: 120

Solved Threads: 61

Posting Pro

Offline

505 posts
since Jun 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Placing images without overflowing

Next Thread in HTML and CSS Forum Timeline: CSS Help

DaniWeb Message

Cancel Changes

User Name
Password