Question

I have a footer that has 3 elements within it as follows:

 <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>

The footer div needs to have a max width of 1600px,i need the JumperMenu to stick to the left of the footer, logo to be in the centre and navJumpMenu to stick to the right, right and left elements need 10px padding..
All is fine with floats – The issue I have is that I need all the elements to also move within their positions on smaller screens – so say the screen was only 1200px i need the 3 elements to stick to their respective layout positions but adjust to fit within the screen size.
Does anyone have any idea at how to accomplish this with pure CSS – so I dont have to resort to a jquery positioning?
Cheers

Answer 1

http://jsfiddle.net/calder12/KjG8v/1/

.footer{max-width:1600px; margin:0 auto;text-align:center;}
.jumperMenu{float:left;}
.navJumpMenu{float:right;}
.logo{margin:0 auto;}​

You’d probably want to set a minimum width on the footer container too to make sure the 3 elements don’t actually run over each other, but I think that’s what you want isn’t it?