Quiero voltear el pie de página <div> verticalmente sin que afecte el div del encabezado, ¿cómo hacerlo? He intentado todo lo posible pero no pude lograrlo. He probado las propiedades de CSS, pero no puedo. Quiero que la imagen del encabezado esté allí, simplemente volteando el pie de página <div> y todas las cosas deberían permanecer como están. Cualquier ayuda será apreciada. Así aparece la página web Quiero así Imagen de lo que quiero que aparezca
<script> $(document).ready(function(){ var $mainImg = $("#main"); var $mainLink = $("#header > a"); $(".thumbs").mouseover(function(){ var src = $(this).attr("src"); var link = $(this).parent().attr("href"); console.log(link); var doubleWidth = $(this).width()*3; var doubleHeight = $(this).height()*3; $mainImg.attr("src",src); $mainImg.css({"width":doubleWidth,"height:":doubleHeight}) $mainLink.attr("href",link); }); }); </script> <body> <style> #footer{ float:none; } </style> <div id="header"> <a href="{% url 'new' %}"> <img id="main" src="{% static 'images/banner/pic9.jpg' %}" width="50%" height="350" alt="people"> </a> </div> <div id="footer"> <a href="#"> <width="auto" height="auto" alt="people"> </a> <a href="#"> <img class="thumbs" src="{% static 'images/banner/pic1.jpg' %}" width="200" height="200" alt="handshake"> </a> <a href="{% url 'new' %}"> <img class="thumbs" src="{% static 'images/banner/pic5.jpg' %}" width="200" height="200" alt="peoplejoined"> </a> <a href="#"> <img class="thumbs" src="{% static 'images/banner/pic7.png' %}" width="200" height="200" alt="unisex"> </a> <a href="#"> <img class="thumbs" src="{% static 'images/banner/pic8.jpg' %}"width="200" height="200" alt="yoga"> </a> </div> </body>Editado después de la aclaración.
Puede usar flex fácilmente para volver a alinear las imágenes verticalmente.
body { display: flex; } #header { align-self: center; } #footer { display: flex; flex-direction: column; } <body> <style> body { display: flex; } #header { align-self: center; } #footer { display: flex; flex-direction: column; } </style> <div id="header"> <a href="{% url 'new' %}"> <img id="main" src="{% static 'images/banner/pic9.jpg' %}" width="50%" height="350" alt="people"> </a> </div> <div id="footer"> <a href="#"> <width="auto" height="auto" alt="people"> </a> <a href="#"> <img class="thumbs" src="{% static 'images/banner/pic1.jpg' %}" width="200" height="200" alt="handshake"> </a> <a href="{% url 'new' %}"> <img class="thumbs" src="{% static 'images/banner/pic5.jpg' %}" width="200" height="200" alt="peoplejoined"> </a> <a href="#"> <img class="thumbs" src="{% static 'images/banner/pic7.png' %}" width="200" height="200" alt="unisex"> </a> <a href="#"> <img class="thumbs" src="{% static 'images/banner/pic8.jpg' %}" width="200" height="200" alt="yoga"> </a> </div> </body>