Firefox float / background problem!?

I have a problem with Firefox display of background or background-color tag if using float.

I want to set a background color to the #container in which there are two columns. To make them side by side i have used float left and float right tag in each of them. If I set a background color to the whole container looks just fine in IE, but FF display blank background. Help!

Here is a relevant piece of code:

html code:
<div id="container">
<div id="middle"> blahblah1</div>
<div id="left">blahblah2 </div>
</div>


css:
#container {
min-width: 780px;
width: 780px;
text-align: left;
padding: 0px;
margin: 0px;
border: 0px;
background-color: #df572F;
}

#middle {
float: right;
width: 460px;
padding: 0px;
margin: 0px;
border: 0px;
}

#left {
float: left;
width: 170px;
padding: 0px;
border: 0px;
}

 

Your problem is that by spec, contained DIV's are taken out of the flow of the document. Because of this, your container div is considered empty by compliant browsers - of which IE is not.

Place the following code at the bottom of your stylesheet:

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

Code (markup):

and then change your html to:

<div id="container" class="clearfix">
<div id="middle"> blahblah1</div>
<div id="left">blahblah2 </div>
</div>

Code (markup):

And if you would like your page centered, change your #container margin to:

margin:0 auto;

Code (markup):

 

Something else to consider is that IE does not support min-width without using javascript(you can embed it via expression or link to it via .htc in your stylesheet if you want).

Depending on the exact look you're after, you can acomplish this layout without floating both divs. Keeping your markup the same, you can change your stylesheet to the following:

#container {
	width:780px;
	text-align: left;
	margin:0 auto;
	background-color: #df572F}
#middle {
	float:right;
	width:460px}
#left {
	width:170px}

Code (markup):

I'm really not an expert. You have to really devote yourself to this crap to want to call yourself one. But unless I'm missing something here, the above will do exactly what you want it to.

A couple helpful hints:

1. You only need to set padding and margin to 0 if it has padding or margin by default. Mainly just form input p h and the body tag have default margin and/or padding I'm sure I'm missing something in there though.
2. If setting something to 0px/0%/0em et al, you only need to set it as 0.
3. Only some input elements have a border by default. You don't need to set these to none.
4. text-align is always left by default unless the parent controls the alignment and is set otherwise. I don't know if it's good semantics to always set the alignment let or not, but to me it's just a waste of space.

Hope this helps.

 

It works! Thanks a lot.

 

Glad I could help.

 

Thanks a ton... I was having the same problem.. you nailed it.

 

Brilliant! Thanks so much for posting this - I've been trying to work out the background issue for a summative assignment I'm on for the past 2 hours

 

Thanks a bunch.
I knew that I was doing something wrong as FF is a compliant browser. But your post rescued me . I wasted 4 hours already on this.
Thanks a lot again
Chinto

 

Thanks man! I just needed that!
Also I found more info about that, so if anyone is interested than: http://www.positioniseverything.net/easyclearing.html.
rep+

 

PIE method is bloated.

overflow:hidden and zoom:1//a fixed width//fixed height or display:inline-block and another declaration with block will do it.

 

thks grec
u solve my problem
it nice from u ...

 

Thnx Grec..

 

atlantis11 very good question and Greg-J thanks for the great answer worked like a charm for my issue as well. Very glad I found this, thank you Google

 

No offense Greg-J, but GAH, NOT this stupid clearfix bullshit AGAIN. The ONLY thing needed here is overflow:hidden - haslayout isn't even an issue much less the rest of that bull.

Let's see... min-width with a regular width declaration - that does nothing. Setting border:0 on elements that don't have borders by default, that's helpful...

Built on the KISS theory:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>float containment test</title>

<style type="text/css">
body {
	text-align:center;
}

div {
	margin:0;
	padding:0;
}

#container {
	width:780px;
	text-align:left;
	overflow:hidden;
	margin:0 auto;
	background:#df572F;
}

#middle {
	float:right;
	width:460px;
}

#left {
	float:left;
	width:170px;
}
</style>

</head><body>

<div id="container"> 
	<div id="middle">blahblah1</div> 
	<div id="left">
		blahblah2<br />
		blahblah2<br />
		blahblah2<br />
	</div>
</div>

</body></html>

Code (markup):

Mind you, I guessed filling in the blanks, but this works cross browser to IE5.5, 6 and 7, FF, Opera and Safari

 

Nice solution!

Thank you.