View Full Version : <div>'s expanding to content height in FF

04-28-2006, 09:02 PM

In firefox browser I am having trouble with my <div>'s not expanding out height-wise appropriate to its content. Sometimes it does, sometimes it doesn't. All other browsers seem to work fine regarding this. I have attached 2 screenshots to help explain. Any ideas on what I need to set this <div>'s style to to accomedate this appropriatly in FF?

Wrong: http://img46.imageshack.us/img46/226/wrong1hx.jpg

Right: http://img46.imageshack.us/img46/2955/right6rb.jpg

Thanks again!


04-28-2006, 11:24 PM
Images are useless in this situation. We need code or a link. I prefer the link.

04-29-2006, 01:01 AM
The problem is not Firefox, it's IE. IE expands divs to contain floated content. This is incorrect behavior. But, like aero said, a specific solution requires a look at your code.

04-29-2006, 09:20 AM
Sorry for that.

Code can be view via this URL: http://www.websolvents.com/forums/

04-29-2006, 12:10 PM
Here's the trick I use for keeping floats inside of DIVs:

#container:after {
content: "";
display: block;
height: 0;
clear: both;
This assumes I alread have the #container coded in CSS, and that it is the <DIV> enclosing floated content. Since IE is not fully CSS2 compliant, it ignores the :after psuedo-element, which is fine because IE (incorrectly) encloses the floated elements anyway. Firefox, Opera, and other CSS2 compliant browsers will recognize the :after psuedo-element and expand the <DIV> to enclose the floated element.

Credit for this solution goes to Matt Brubeck, and you can read his article in full by following this link: How to completely enclose a floated element in CSS2 (http://www.cs.hmc.edu/~mbrubeck/clear-after/).



04-29-2006, 05:45 PM
Okay make sure all of your images have widths and heights set to them. Firefox some times needs this to display the page properly. Also this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
should be this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
It may throw things off a bit in IE or might not do anything at all to IE but it may make FF better to. After all you should be coding for a good browser (FF) and tweaking for the bad one (IE). overflow:hidden; on the main container also fixes the problem sometimes.

04-29-2006, 11:21 PM
Still doesnt seem to be working properly in FF.

I've been editing here for hours, still cant seem to find a fix.

Here is another link that will not expand out in Firefox:

Click around on the knowledgebase/announcement, etc. links there in the middle. Sometimes it expands out for the content, other times is doesn't and has is "hidden".

Any more ideas?

I really appreciate the help.


04-30-2006, 01:49 AM
The second page doesn't even have a doctype and both have a bazillion html and css errors. Validate and fix those first.