IE Render glitch from clearing floats

[beetle]

Here are the two pages

http://www.trophyfitnessclub.com/sta...ainers/?club=1
http://www.trophyfitnessclub.com/sta...iners2/?club=1

The first one uses a <br> to clear the floats. As you can see, in IE, this creates an unwanted line break.

The second one uses a <div> to clear the floats. Again, as you can see, in IE, this causes a nested div in the 2nd column to go white. Forcing a background-color of transparent doesn't work (other colors work, but transparent doesn't allow the blue to show through). The blue background that should be showing through comes from div#content

I put colored borders on the bottom of the key DIVs so I (we) can see where they end.

The full CSS can be seen here
http://www.trophyfitnessclub.com/sta...css/screen.css

The most pertinent CSS is this

      body.trainers div#content {
      	background: transparent url(../images/bg_content_trainers.gif) repeat-y top right;
      	border-bottom: 1px solid red;
      	}
      body.trainers div#col1 {
      	width: 296px;
      	height: 400px;
      	padding-bottom: 20px;
      	float: left;
      	margin-right: 3px;
      	background: transparent url(../images/bg_trainer_nav.jpg) no-repeat 0 0;
      	border-bottom: 1px solid green;
      	}
      body.trainers div#col2 {
      	/*
      	This works, but is too heavy handed to be a viable solution
      	background: transparent url(../images/bg_content_trainers.gif) repeat-y top right;
       	*/
      	width: 449px;
      	float: left;
      	border-bottom: 1px solid orange;
      	}
      body.trainers div#col1 .content {
      	padding: 0px 20px 20px 20px;
      	margin-top: 20px;	
      	}
      body.trainers div#col2 .content {
      	padding: 30px;
      	}

I'm pretty sure I've seen/fixed this bug before, but a solution isn't coming to me.

[Paul O'B]

The best way to clear floats is to use this.

.clearer{
height:1px;
overflow:hidden;
clear:both;
margin-top:-1px;
}

<div>
	<div>floated stuff</div>
	<div class="clearer"></div>
</div>

That should clear floated elements in ie and firefox without any extra space. (Sometimes (very occasionally) firefox needs <br class="clearer" /> instead but the result is still the same as mentioned.)

Paul

[beetle]

Well, that clears the floating alright, but it causes an even more egregious error than what I had

http://www.trophyfitnessclub.com/sta...iners3/?club=1

[Paul O'B]

Hi,

Ie doesn't like it when you float things inside elements that have no width defined even though the parents parent may have a width defined. It's the same problem you get when an element has its width define by margins alone.

The same fix works for both and thats to declare a height of 1% to give it something to get hold of.

Add this to your stylesheet.

/* commented backslash hack v2 \*/ 
* html div#content {height:1%;} 
/* end hack */

use the clearer div as mentioned in my first post and now the element will clear correctly with the background correct (with any luck)

Paul

[beetle]

Thanks Paul - I must owe you at least a 6pack of your favorite micro-brew by now.

I'll definitely commit this to memory.