Forcing my div to expand regardless of holder width

Question

How do I force my float class to float:left regardless of wrapper width. I want the content which is called into the class g_photo to content going right, not to drop to the next line when it reaches the end of the wrapper.

html:

<div id="wrapper">

<% for gallery_photo in @gallery.gallery_photos %>

<div class="g_photo"><%= image_tag gallery_photo.photo.url(:normal) %></div>

<% end %>

</div>

css:

#wrapper{width:800px;}
.g_photo{width:auto; float:left; margin-right:10px;}

If I set a width of 2000px this work fine for static content but the content is dynamic so the width maybe small of bigger.

I will be great full for any help!

p.s. I'm using jScrollHorizontalPane I can get it to work if I declare the width but not on auto width.

Answer 1

I don't have enough rep to comment, so I'll ask you a few q's and give you an answer based on what I think the problem is.

Basically, you want to keep stacking things in a row, side by side, even when that row gets longer than the 800px width set by its parent element, #wrapper?

If so, you can't. Float: left will always jump down to the next line when it runs out of space. I did have a thought the overflow property could work, but it doesn't.