Currently, I am working on a website project for a client who wants to incorporate a unique feature which involves having a very wide but not very tall page.
One challenge I am facing is the placement of a list of objects on the page in a way that they continue to the right indefinitely.
Here is the simplified code I have come up with so far:
{% for x in list %}
<div style="position:absolute; left:{% widthratio forloop.counter0 1 400 %}">
<img src="{{ x.image.url }}" alt="{{ x.title }}"/>
</div>
{% endfor %}
While this code works, I feel like it is somewhat of a hack. I am seeking a better and more elegant solution to ensure that regardless of the browser size, the items remain aligned in a row and a scroll bar allows users to navigate to the right.
I would appreciate any suggestions or assistance on this matter. Thank you in advance!