Clear float in IE 8

Question

I am trying to build a page in .NET MVC (not that this matters) where a div is divided into left and right containers using a float. When I try to clear the float using anything other than a <b> tag (such as <div> or <br>), IE8 will not render the page correctly (it's as if it ignores the style in the tag). If I use the <b> tag, Chrome and Firefox do not render the page correctly. I have been over my HTML to make sure that I dont have any stray tags and have run it through W3C markup validator and it passes XHTML 1.0 strict. I am at a loss for what could be going on here. I realize that there are better ways to clear floats (such as using the :after pseudo element) but i need something simple and clean. I was wondering if anyone had an idea as to what might cause this to happen, maybe something in the stylesheet? Thanks in advance for any help.

Answer 1

Try the clearfix method: http://www.positioniseverything.net/easyclearing.html

Answer 2

I found it. Stupid IE. I had to set the height of my div that housed the two floated containers to 100%. I guess that Mozilla and Chrome assume a height of 100% where IE does not. I should have been more explicit. The problem was that when i used a DIV tag to clear the floats, nothing was showing up in my container or the background color would not fill. I had to install IE developer toolbar to figure out what was going on.

<div id="floatcontainer" style="width:100; height:100%;">

<div id="floatleft" style="float:left; width:50%; background-color:#454545;"></div>
<div id="floatright" style="float:right; width:50%;"></div>
<div id="clear" style="clear:both;"></div>

</div>