Height Problem in Firefox

[adamjblakey]

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

[drhowarddrfine]

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.

[adamjblakey]

Hi,

Sorry about the lack of example code.

Here is the html

[HTML]
<div id="body">
<div id="contact_det ails">
<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]

#body {
		padding:10px;
		padding-left:10px;
		padding-right:10px;
		line-height:20px;
		background-color:#fff;
		height:100%;
		}

#contact_details { width:225px; float:left; padding-right:15px; height:100%;}
#main_text { width:620px; float:left; padding-left:15px;  border-left:1px solid #EBEBEB; height:100%;}

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

Cheers,
Adam

[drhowarddrfine]

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.

[adamjblakey]

Thanks a lot, it works a treat :)