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

 

You have failed to provide your markup and css, but I'll hazard a guess that you have failed to contain float elements.

cheers,

gary

 

Hi,

Sorry about the lack of example code.

Here is the 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:

#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%;}

Code (markup):

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

Cheers,
Adam

 

#body is 100% of what?

Did you read the article is linked?

gary

 

You have
padding:10px;
padding-left:10px;
padding-right:10px;

This will confuse the browser. The first line means make all 4 sides of the padding to be 10px;. The next two lines set the right and left padding, but the first line has set the padding for all sides, so if you want all sides to have 10px padding then keep the first line and axe the next two. If you only want padding n the left and right sides, then axe the first line and keep the next two. But you shouldn't have all three as there is a bizarre redundancy.

Body height never needs to be 100% as this is the default value for the body. As kk5st said, 100% of what? There is no outer container for the body to be 100% of it, so by default, it is 100%. But the key point is that it will be 100% of the content that it contains or 100% of what it needs to be.

The REAL problem, is probably due to the fact that both elements within the body are floated. I do not think you have to contain your floats or bother containing them as the article suggested because the article isn't exactly about what it SEEMS that you are trying to do. Whenever you float an element, it takes that element out of the flow of the document and the browser does not count it as content even though it WILL display the text within it. Therefore, since the browser thinks there is no content in the body, even though it displays the text, it thinks there's no reason to expand your body and makes it 100% of the contained content which would essentially be 100% of nothing. This is NOT an IE problem because all IE is doing is trying to be generous and give you the benefit of the doubt or guess what you surely must mean whereas FF is stricter and gives you no benefit of the doubt.

Basically, if there will only be two elements in your body, don't float the second element (main text) as it doesn't need to be floated. Just float the first element (contact_details) left, and the second element will go to the right of the first element which appears to be what you are trying to do. Since the second element isn't floated, the browser (FF) will count it as content and stretch out the body to be as tall and/or wide as the content in the second, non floated element, whereas it is NOT counting the first element as content because it is floated. That's as much as I can tell you without seeing the site.

 

Hi,

Thanks for your replies, the fix for this was just overflow:auto on the body div.

Cheers,
Adam

 

Doesn't overflow has to do with scrolling an element or not? Somehow, I'm not so sure that this is the correct fix, although it might work temporarily. Best of luck.

 

That is exactly a correct fix. Declaring an element {overflow: !visible;}, creates a new block formatting context, which requires the element to enclose its children.

See the article ref'd above.

cheers,

gary

 

* html {
height: 1px;
}

???

 

Do you mean {overflow: hidden;}? I can't find anything in the spec about {overflow: !visible;} and the spec only seems to refer to clipping and scrolling.

http://www.w3schools.com/Css/pr_pos_overflow.asp

And I still don't see how overflow:auto is going to always work. Won't there be a few potential problems if or when the layout changes?

Never mind. I guess you mean anything BUT overflow visible. Andy Budd suggest applying 1px; height to *html to handle the problem site wide and once and for all. do you agree?

 

Actually kk5st, ironically, I was experiencing a similar problem with a container div. I solved it by clearing the float <div style="clear:both;"> but I tried your solution using the overflow and it works too. I actually like your solution in this particular case because from a semantics POV, it avoids the unnecessary div. Thanks. Good to know.

 

Reread Budd. I suspect he had a specific set of cases in mind. (I recommend CSS Mastery, but have long since passed on my copy, so can't check.) The "* html" hack is a method of passing style rules to IE≤6. It is ignored by IE7, and by modern browsers. The {height: 1px;} is a method of setting hasLayout described first by Holly Bergevin (thus, the Holly Hack). Setting hasLayout across the board is a bad idea. See Ingo Chao, "On having Layout". IE's hasLayout will fix many of IE's myriad problems, but it is equally guilty of causing just as many issues. Trigger hasLayout only when required; it can't be unset once invoked.

cheers,

gary