How to fix CSS float issues in IE6 and IE7?

I am talking about the "Previous" and "Next" post navigation links below the articles on my website, which look like this (below) in all modern browsers (IE > 7)

But in IE6 and IE7, it looks like this

Yes, the rest of my website looks very fine in these browsers as well, and want to get this to work, and without breaking anything else. I see that IE6 and IE7 can have float issues, and that there's a fix as well (a working one, I couldn't find).

This is the HTML code pertaining to the post navigation (mentioned above):

<div class="post-entries">
<div class="nav-prev fl"><a href="http://example.com/2011/01/01/post-1/" rel="prev"><span class="meta-nav">?</span> LG's A530 3D Notebook Shoots And Plays In 3D [PICS]</a></div>
<div class="nav-next fr"><a href="http://example.com/2011/01/01/post-2/" rel="next">LG's Mouse Sc开发者_StackOverflowanner Saves Scanned Material To Image, PDF or DOC <span class="meta-nav">?</span></a></div>
<div class="fix"></div>
</div>

and here's the CSS code pertaining to the above:

.post-entries { clear:both; margin-top:20px; background-color: #F8F8F8; border-bottom: 1px dashed #AAAAAA; border-top: 1px dashed #AAAAAA; line-height: 1.7; margin-bottom: 15px; padding: 5px 10px; font-weight: bold; font-size: 1.1em; }
.post-entries a:link, .post-entries a:visited { font-size:0.9em; color:#888; }

.fl{float: left;}
.fr{float: right;}

.fix{clear: both;height: 1px;margin: -1px 0 0;overflow: hidden;}

I hope I am clear. Can someone help me out with this?

How about this? Added css:

/*.post-entries{float:left;width:600px}*/
.nav-prev,.nev-next{display:block;width:100%}

Updated fiddle: http://jsfiddle.net/y3MBC/14/

I think if you just add a <div style="clear:left;></div> in between the two divs it will format the way you want. I tested it in ie7 but don't have an effective way of testing for ie6. Here's the updated fiddle: http://jsfiddle.net/D3Jja/

Looks like you haven't specified a width for the div's. Try this:

.fl{float: left; width: 100%}
.fr{float: right; width: 100%}

Also if you plan on using margin/padding add a display: inline to your floated elements to prevent old IE from doubling the amount of margin/padding.

Thanks to @marissa.c for the help, this is the answer...

modify this line:

.post-entries { clear:both; margin-top:20px; background-color: #F8F8F8; border-bottom: 1px dashed #AAAAAA; border-top: 1px dashed #AAAAAA; line-height: 1.7; margin-bottom: 15px; padding: 5px 10px; font-weight: bold; font-size: 1.1em; }

to his:

.post-entries { clear:both; margin-top:20px; background-color: #F8F8F8; border-bottom: 1px dashed #AAAAAA; border-top: 1px dashed #AAAAAA; line-height: 1.7; margin-bottom: 15px; padding: 5px 10px; font-weight: bold; font-size: 1.1em; height: 100%; }

And then add this line:

.nav-prev, .nev-next { display:block; width:100%; }

And that fixes the float issues. It now even works in IE6, all credit to @marissa.c