Background color in div doesn't work in iphone

Question

I've done some media queries for the site http://www.domda.se The problem is that the backgroundcolours in #middle and #bottom doesn´t work when I look at the site on an iphone. The problem started when I added -1 margins to prevent gaps between the divs. I've tried to remove the negative margins to see if that helps but it didn't work.

What have I done wrong?

Answer 1

In this rule, into this media query

@media only screen and (max-width: 480px), screen and (max-device-width: 480px),
screen and (max-width: 600px)  {
/* ...some other stuff here... */
    #middle {
        background: #00ffff;
        float: none;
        margin: -1px 0 0 0;
        width: 100%;
        clear: both;
    }
/* ...some more stuff here... */

Can you try to add overflow:hidden; ? Also in the #bottom :

#bottom {
    background: #fff;
    float: none;
    margin: -1px 0 0 0;
    width: 100%;
    clear: both;
    overflow:hidden; /* ADD THIS PROPERTY ON BOTH */
}

I think the problem is that you're removing the float, so the container will not ... contain its contents anymore.