IE problem using 'clear'

[crazy888s]

So I've been trying to learn the correct way of creating web pages using DIVs and CSS. All has been going well, but for some reason I have this issue with the 'clear' property in IE.

The problematic section of my page is laid out as follows:
___
A|B|
--|C|


Each letter represents a DIV. DIV A is floated left and must be to work with the rest of my page. The problem comes with DIV C. This is a navigation footer, so I want this section to always be below the floated DIV A. DIV C is nested within DIV B so it is centered below it, and so it will also expand the height of DIV B (as the picture shows).

Setting DIV C's "clear" property should do this no problem (e.g. clear: left|both, however, in MSIE, any text that is in DIV B becomes invisable! I am able to select it with the mouse and it will appear for a bit, but will disappear if I move the IE window. Using Firefox, everything works perfectly. I havent been able to find this problem anywhere else on the web either... so perhaps I'm doing something wrong or should do this another way?

I made up a simple example page if you'd like to see the case/code/CSS:

http://web.ics.purdue.edu/~amuehlha/test/index.html

thanks in advance,
-adam

 

[crazy888s]

Well I talked to one of my buddies and I guess this is a "known rendering big in IE".

To fix it, he had add one line to the #content section (DIV B in the great ASCII picture above) of the style sheet. This is it:

line-height: 1.2;

of course. =]