Div Height problem in Firefox.

Since i start working with XHTML format, i have this problem Div acting different in FF, and sometimes i add exact height for solving that problem but now finally i found the solution. and i really love to share it with you, because i know this problem is so common to all people.

HTML CODE:
<div id=”content”></div>

CSS CODE:
#content {
display:table;
margin:0 auto;
background-color:#FFFFFF;
width:965px;
}

yes folks just put display:table; in your css.

More information from http://archivist.incutio.com/viewlist/css-discuss/83996

Firefox (and other good browsers) will calculate ‘height: 100%’ on any
container from its parent. You have forgotten to declare height on
div.shadow, so div.container defaults to ‘height: auto’.

Now, if you add the following…

div.shadow {height: 100%; display: table; width: 810px; margin: 0 auto;
border: solid 1px red;}

div.container {display: table;}

….you’ll get an immediate, and positive, reaction from Firefox (and
other good browsers). Firefox is slightly behind since (I think) it
supports CSS2 for ‘display: table’, while Opera and Safari seems to
support css2.1 for that property and expands all elements completely.
Doesn’t make much of a difference in most cases.

The important parts are ‘height: 100%; display: table;’ on div.shadow,
and ‘display: table;’ on div.container. I put in the rest just for
appearance.

Note that ‘height: 100%’ not only makes an element expand to that
height, it also _limits_ it to that height. There’s where ‘display:
table’ comes in handy, since that property effectively turns ‘height:
100%’ into ‘min-height: 100%’ so the element can keep on expanding if
there’s more content.

IE6 will work fine with the additions above – because of its
‘auto-expansion’ bug. Mode doesn’t matter since you have the old
centering-method in there too.