My footer consists of 3 elements structured in the following way:
<div class="footer">
<div class ="jumperMenu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class ="logo">
<a href="#"><img src="#"/></a>
</div>
<div class ="navJumpMenu">
<ul>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</div>
To adjust to different screen sizes, the footer div needs a maximum width of 1600px. The JumperMenu must stick to the left, the logo centered, and the navJumpMenu stuck to the right with 10px padding on each side. While floats work fine for this layout, I encounter an issue when needing all elements to adapt their positions on smaller screens (e.g., 1200px) and maintain their respective layouts without using jQuery positioning. Does anyone have suggestions on how to achieve this responsive design using pure CSS? Thank you!