footer messing up on smaller resolutions...

[SoundOfFaz]

Hi,

with the latest site I am working on, I have a link, a mini site map and the company name in the footer. It displays fine on my 27" mac, 37" monitor and another 21" monitor. See the attachment 'large.png' all looks well however as soon as I view the site on anything smaller i.e. a 15" monitor or below (iPad, mobile etc.) it scrambles up the 3 lots of text and almost seems to centre them all so they all overlap. See attachment 'phone.png'

Obviously this is a layout/CSS issue but not sure what. I am certainly not a CSS expert but wanted to try a slightly different footer which has backfired!

Can anyone help?

The html for the footer is here:

<footer>      <div class="container">          <div id="FooterTwo"> © <span class="arial">2012 MRF Electrical Services </span></div>         <div id="FooterTree"><a href="http://www.magnetikmedia.co.uk"><img src="images/magnetikmedia_logo.png" width="275" height="28"></a></div>          <p>&nbsp;</p>         <p><a href="index.html"><b>Home</b></a>&nbsp;&nbsp;           <a href="aboutus.html"><b>About Us</b></a>&nbsp;&nbsp;           <a href="services.html"><b>Services</b></a>&nbsp;&nbsp;           <a href="contact.html"><b>Contact</b></a></p>    </div>   </footer>

large.pngmobile.png

[ap0c]

I think that you need to set a minimum width on your DIV's to stop the overlapping

[SoundOfFaz]

I think that you need to set a minimum width on your DIV's to stop the overlapping

Ok, I just googled what you said and one guy on another forum is saying instead of setting a minimum width make sure to put a   in between divs so for example (his example, not relating to my code)

<div style="width:500px">&nbsp;</div>

Do you reckon this would work?

[ap0c]

One way to find out mate, trial and error, the joy of coding

I notice that you are using div classes so you need to find where they are and tweak them.