Javascript's call ruin floating in Firefox

Question

I have the page with the structure:

<div id="container">
   <div id="header">top menu</div>
   <div id="content">content</div>
   <div id ="footer" align="center">
       <div class="left">left part of footer menu</div>
       <div class="right">right part of footer menu</div> 
   </div> 
</div>

Css style:

#container {
    position:relative;
    height:auto !important;
    height:100%;
    min-height:100%;
}

#content {
padding:0em 0em 12em;
}

#footer {
    position:absolute;
    width:100%;
    bottom:0; 
}

.left {
    float: left;
}

.right {
    float: right;
}

That works fine in all browsers. But when I add

<script type="text/javascript"></script>

inside

<div class="left">

in FireFox(only) the part of footer after the script come up to the top - between header and content divs. What's wrong with it?

UPD This all was about wrong mark-up inside #content. And only FireFox didn't understand when I missed one of closed table tag:) Thank you guys, you helped me to sort it out.

Could you add a screen grab of this? I can't see it in Firefox4. — andyb, Apr 07 '11 at 08:34
I'm sorry, it was about wrong mark-up inside #content. And only FireFox didn't understand when I missed one of closed table tag:) Thank you guys, you helped me to sort it out. — Alex, Apr 07 '11 at 09:09

score 1 · Answer 1 · answered Apr 07 '11 at 08:13

1

The #footer has absolute position and is inside the relatively positioned #container div so I would expect this. Maybe try making container absolutley positioned.

Also I think your markup is not what you intended. There are one too many opening div tags.

answered Apr 07 '11 at 08:13

Luke

1,381
2
11
11

Thank you, it was one odd close div tag, I fixed it. And about absolute positioning of container tag - no, it doesn't work. – Alex Apr 07 '11 at 08:25

score 0 · Answer 2 · answered Apr 07 '11 at 07:51

0

change the #container height from auto to 100% and remove the extra lines for height. The auto is messing up the calculations as it overrides the 100% lines due to the !important value

answered Apr 07 '11 at 07:51

Tyler Pham

88
5

Thank you. But even if I left only height:auto or height:100% in #container, the situation doesn't change. – Alex Apr 07 '11 at 08:16
having **height: 100% !important** – Tyler Pham Apr 07 '11 at 14:40

score 0 · Answer 3 · edited May 23 '17 at 12:19

Since #footer's position is absolute, with bottom 0, it will be positioned relative to its first (non statically positioned) parent, which is #container. Essentially what's happening here is that #container is becoming mush less high, and dragging #footer with it.

That's happening because you have two height: settings in the css for #container (somehow the script tag triggers it to refresh) so the behaviour would be undefined.

If you're trying to make the footer stick to the bottom of the window, including as it's resized, I'd advise having a javascript function handle it, triggered by the window's resize event (it's fairly simple, see this question on javascript window resize event

I've missed one important thing in error's description: the part_of_footer_AFTER_the_script come up to the top - between header and content divs. The other thing that it doesn't depends on height settings (I tried with one ot them - the same situation). I'd like to solve it without jquery, but thank you for advice. — Alex, Apr 07 '11 at 08:36

andyb · Answer 4 · 2011-04-07T09:00:50.723

0

You could try the CSS a different way with absolute positioning. I try and avoid float as it can lead to unexpected rendering issues. See this jsFiddle for an alternate approach. Working in IE6, Chrome12 and FF3.6 and FF4 for me.

edited Apr 07 '11 at 09:00

answered Apr 07 '11 at 08:44

andyb

42,062
11
113
146

Thank you, amazing service, didn't know about it. It helped me to understand what's wrong. This all was about wrong mark-up inside #content. And only FireFox didn't understand when I missed one of closed table tag:) – Alex Apr 07 '11 at 09:11

Javascript's call ruin floating in Firefox

4 Answers4