new container

app/static/js/films.js

@@ -7,9 +7,9 @@ function selectChanged() {
         const bVal = b.dataset[sortValue]
         return aVal < bVal ? -1 : 1
     })
-    document.getElementById('films').innerHTML = ''
+    document.getElementById('films-list').innerHTML = ''
     $films.forEach($film => {
-        document.getElementById('films').appendChild($film)
+        document.getElementById('films-list').appendChild($film)
     })
 }
 

app/templates/films.html

@@ -2,7 +2,7 @@
 {% block body_class%}animated animated-text{% endblock %}
 {% block main %}
 
-<div class="films" id="films">
+<div class="films">
 	<div>
 		<strong>Sort:</strong>
 		<select id="sort-select">
@@ -14,6 +14,7 @@
 			<option value="lightness">Lightness</option>
 		</select>
 	</div>
+	<div id="films-list">
 	{% for film in films %}
 		<div class="film"
 			data-position="{{ film.position }}"
@@ -35,6 +36,7 @@
 		</div>
 	{% endfor %}
 	</div>
+</div>
 {% endblock %}
 
 {% block end %}