Problem with CSS Layout in Firefox vs IE

[tmricha]

I am working on a site for a local church and am having problems with a "container" element not resizing to fit the height based on contents.

Viewing the page in IE displays it correctly, however, in Firefox (v1.5) the sidebar item floats over the main container...thus not growing the main container to fit.

I have been doing webDev off and on for about 10yrs now and this is the first site I am trying to build COMPLETELY TABLELESS (applause please...I know Im late).

[snip]

Anyways, any help on what Im missing would be greatly appreciated.

Cheers!
Troy

[edited by: createErrorMsg at 8:44 pm (utc) on Feb. 2, 2006]
[edit reason] No URLs, please. See TOS and forum charter. [/edit]

[Fotiman]

Firefox is behaving correctly. IE incorrectly expands the height to contain the floated block, which is wrong. If you want the floated block to be contained within the parent block, you could add a clearing element after the float (but still within the parent block). Or you might try floating the parent as well, which should then contain the floated block.

For example:

<div id="content"> 
  <div id="boxRightTop"> 
   This is floated... 
  </div> 
  <br /> 
  <p> 
   Main content... 
  </p> 
  <br class="addClearance" /> 
</div> 

And then in your CSS:
.addClearance { clear: both; }

Hope that helps.

[tmricha]

Thanks, that did the trick.

I guess I should read up on float and clear....

thanks again.