html - relative and absolute positioning in IE and FF -

I think that when you add more content to it, it wants to be a division, at least the height of the viewport and one Title and a footer top and bottom sticking I came up with the following which works fine in IE7 but does not work in FF3.

This HTML (mainly repeating 'multiple text') viewport):

   & Lt; / Div & gt; & Lt; Div id = "footer" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; Html & gt;  

This is CSS:

  * {margin: 0 px 0 px 0 px 0 px; Padding: 0 px 0 px 0 px 0 px; Border: None; Z-index: 10; Font-family: aerial; Font-size: 20px; Text-decoration: None; Align text: left; } Html, body {height: 100%; Background color: RGB (255, 255, 255); } #main_body {status: relative; Minimum height: 100%; Height: Auto! Important; Height: 100%; Margin: 0 px 20 px 0 px 20 px; } # Headers {Position: Absolute; Top: 20px; Left: 0 pixels; Height: 50px; Width: 100%; Background color: RGB (40, 40, 40); } # Content {margin: 80px 10px 50px 10px; } #footer {status: complete; Bottom: 20px; Left: 0 pixels; Height: 20px; Width: 100%; Background color: RGB (40, 40, 40); }  

I think it should work according to the glasses. And it is in IE but not in FF3.5.

Edit: I found out (thanks to Jeepstone) that when I change the margin to padding in # content then it works fine

100% height is not straight forward, you need to do something like this.

Incidentally, where you are resetting *, you should reset Eric Meyerser's CSS reset because everything can cause problems.