Height Problem in Firefox

Hi,

I have got a problem with the background color of a div.

Basically i have a main div called body this has a height of 100% and background color of white.

Then i have 2 divs inside this which are both aligned to the left.

The problem i am having is in firefox the white background is not going 100% of the divs that are inside, but this works fine in IE.

Any ideas?
Cheers,
Adam

re: Height Problem in Firefox

Without a link or the complete markup it's only a guess but:

Are the inside elements floated? IE incorrectly expands containers to include floated content. This is incorrect behavior and Firefox would be performing correctly.

Never, ever use IE as an example of how things should work. It is 10 years behind web standards and incorrect in much of its implementation. Always, always use a modern browser, such as Firefox/Opera/Safari. Then we can hack to make IE work.

re: Height Problem in Firefox

Hi,

Sorry about the lack of example code.

Here is the html

[HTML]
<div id="body">
<div id="contact_details">
<h3>Contact Details </h3>
<p>Details here</p>
</div>
<div id="main_text">
<h1>Title</h1>
<p align="justify">Details Here. </p>
</div>
</div>
[/HTML]

So basically the body should span the size of the #main_text and #contact_details but it doesn't.

Cheers,
Adam

re: Height Problem in Firefox

Yes. Like I said above, you are using IE as your reference but you are referencing a bug. Firefox is performing correctly and all modern browsers will do the same. To get everyone to do what you want, add 'overflow:auto' to the body div.

re: Height Problem in Firefox

Thanks a lot, it works a treat :)