django incrementing div location

I'm working on a site where the client is looking to implement a "gimmic", the short version being the page will be very wide and not very long.

What I'm having trouble with is as follows: given a list of objects, I'd like to place them to the right indefinitely.

I've currently worked out (simplified):

{%  for x in list %}
    <div style="position:absolute; left:{% widthratio forloop.counter0 1 400 %}">
        <img src="{{ x.image.url }}" alt="{{ x.title }}"/>
    </div>
{%  endfor %}

I believe this is quite a hack an开发者_StackOverflowd am looking for a better way to implement. The greatest goal is that no matter the size of the browser the items stay in line and a scroll bar allows navigation to the right.

Thanks in advance for any help!

display:table-cell

http://jsfiddle.net/seler/pedhx/

This is a CSS question, not a Django one.

In any case, the way to get things to line up next to each other is to float them.

<div style="float:left;">
    <img...>
</div>

Actually, you should have the style in a stylesheet somewhere and give the div a class which references that style.

If you're using absolute positioning, you don't have to worry about the element being constrained by size, so long as you give it the style display: inline;. By doing so, it will grow relative to the size of the elements inside of it. You should use display: inline; and/or float: left; to ensure that your inner elements don't break onto the next line.