I'm having an unexpected issue here, and I'm hoping a second set of eyes can see where I'm messing up. This should be obvious and simple, but I swear I've spent 3 hours working on it and can't figure it out! LOL Which is what I get for coding from 3am until 6am, I guess.

Here's my code:

<nav style="height: 26px">
 <div style="float: left; height: 26px; border-top: 1px solid #000">
  Test Text
 </div>

 <div style="clear: both"></div>
</nav>

<nav>Second Text</nav>

This is obviously not the live code, but this is the absolute minimum that still duplicates the problem.

The problem is that "Second Text" shows beneath "Test Text" like it should, but it's floated to the side instead of directly under! It looks like I have a 100px margin-left on "Second Text", when obviously I don't.

In the test, it stops floating if I remove any of the height tags or remove the border-top style, but that doesn't solve the problem, it just covers it up.

It also stops floating if I change the first DIV to a SPAN and eliminate the float: left, but I need to assign the height for cosmetic reasons.

Finally, it also stops if I add a second <div style="clear: both"></div> after the first </nav>. Which I COULD do in practice, but I don't understand why that works. The <nav> tag is a block element by default, right?

So where am I going wrong?