Question

I realy need your help as this is driving me nuts.

On my website http://www.markett.nl I have 2 divs floating next to eachother.

All the browsers seem to load nicely, accapt when I view the website on the iPad the div is pushed downwards as if its wide is to large.

I have read it mayby has to do with some css padding issues, but I believe padding is not used on these div elements. I use firebug for insight in css but cant solve my problem.

I’ve uploaded 2 images so you can see what the probem is:

Image 1 as is loads on most browsers.

Image2 will show the problem.

Answer 1

You have @media queries in your CSS file for responsive layout. Find this in your CSS (around line 2640):

@media (max-width: 800px) {
    /* Simplify the basic layout */
    #main #content {
        margin: 0 7.6%;
        width: auto;
    }

and remove the margin attribute from that rule. Also you don’t have to test on iPad the result – you can simply change the width of your browser window.