When zooming in, why does the footer overlap its preceding content

Question

here is the sample html:

<div id = "mainWrapperDiv">
    <div id = "mainDiv">
        <div> testing </div>
    </div>
 </div>
 <div id = "footerDiv">
 </div>

its css:

*
{
    padding:            0px;
    margin:             0px;
}

body, html
{
    height:             100%
}

div
{
    border:             none;
}

#mainWrapperDiv 
{
    min-height:         100%;
    height:             100%;
    margin-bottom:      -200px;
} 

#mainDiv  
{

    margin:             0px auto 0px auto; 
    width:              1000px;
    min-height:         500px;
    background:         lightgreen;
}



#footerDiv
{
    height:             200px;
    width:              100%;
    position:           relative;
    clear:              both;
    background:         lightblue;
}

score 1 · Accepted Answer · answered Jan 23 '11 at 17:34

1

What sticky footer are you using? What does your code look like? You could try

http://www.cssstickyfooter.com/

answered Jan 23 '11 at 17:34

Herman Schaaf

46,821
21
100
139

yes i did, in fact thats the sticky footer code im using, and it still overlaps the divs when zooming in on the web page, NOT RESIZING THE BROWSER WINDOW, zooming in. – dave Jan 23 '11 at 17:44
2

Doesn't happen in Chrome. What browser are you using? – Herman Schaaf Jan 23 '11 at 17:45
Ok did you try zooming in? Try ie or opera and zoom in a lot, and eventually, with the code above, the sticky footer and other divs will overlap. – dave Jan 23 '11 at 17:49
Sorry, I don't have IE or Opera installed right now, so can't replicate it. But if you /really/ are that concerned about this (which I think you shouldn't be), and adamant it should work in IE, I'd suggest a jQuery-oriented solution that adjusts the height and position dynamically. It's hacky, but it will work. – Herman Schaaf Jan 23 '11 at 17:55

score 0 · Answer 2 · answered Jan 21 '11 at 21:57

0

Because the position is set to relative. and also the margin-bottom: -200px;

answered Jan 21 '11 at 21:57

profitphp

8,104
2
28
21

I took out the relative and still has the issue. – dave Jan 21 '11 at 21:58
margin-bottom: -200px; Thats probably not helping either. – profitphp Jan 21 '11 at 22:00
do it a different way the, because thats the issue. – profitphp Jan 21 '11 at 22:31

score 0 · Answer 3 · answered Jan 21 '11 at 22:46

0

It's because of your margin-bottom in the #mainWrapperDiv. If you take that out it appears to work okay. Check it out http://jsfiddle.net/kA6XJ/

answered Jan 21 '11 at 22:46

Aaron Hathaway

4,280
2
19
17

In what way did it not help? For me, it appears that the green no longer overlaps the blue... – Aaron Hathaway Jan 22 '11 at 04:42
Not to mention, if you take out the negative margin, it will make the footer not stick to the bottom or basically at the end of main content. – dave Jan 22 '11 at 14:03
Describe exactly what you're trying to achieve here. Currently, with my fiddle, the green div maintains its height of 20em while the blue div maintains its height of 200px. In both Chrome and IE it appears that the Green will stay at the very top and the blue at the very bottom. If the window is larger than the 200px + 20em it will throw it as white space in between but if it's smaller it will never overlap the two. I'm really trying to help out so please give a little more to go off of. – Aaron Hathaway Jan 22 '11 at 15:46
Did you try zooming in, instead of resizing the browser window? I think thats where you are missing my point. – dave Jan 23 '11 at 17:36

When zooming in, why does the footer overlap its preceding content

3 Answers3

Related