thanks for looking. please reference this image:


A: shows on a normal computer with a decent resolution.

B: shows when viewing the same page on a iphone in landscape view or if the resolution is really small on a computer.

as you can see in "B" the main body will overlap both teh "header" and "footer" areas, is there anyway to prevent this from happening so that the general areas of hader, body and footer are locked so they do not overlap? i have tired "min-height" also other methods but i can not figure it out.

thanks for looking.