float: left not ending with clear: both

[csdude55]

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?

[robzilla]

Your border adds 1px to the height of the element (26+1=27), which makes it higher than its parent element (26). If you add 1 pixel to the height of <nav> or substract one from <div>, the float clears properly.

[not2easy]

I once spent hours trying to correct an issue before I noticed that I had not closed the inline style with ';'
Try <div style="clear: both;"> in place of <div style="clear: both"> and because the issue I was dealing with had no obvious connection with the inline styling that needed the semicolon, I would suggest closing any other inline style tags with ; as well.

[robzilla]

The semicolon is just a separator, though, and not strictly required at the end of a declaration, such as in this example. Browsers shouldn't choke on that. If you leave it out and then add other rules, however, you'll run into trouble, so it's probably good form to include it. My CSS minifier takes care of removing these last semicolons (leaving the source file in tact, of course), and that's never been an issue.

[csdude55]

That makes sense, Rob. Changing that DOES fix it, and using a screenshot image, the height ends up being the same either way.

What I don't quite understand, though, is why did a second <div style="clear: both"></div> tag fix it, if the problem wasn't with it floating? I had tried an empty <div></div> tag just to see if the style was irrelevant, but that didn't fix it; just the clear: both did.

Not2easy, I've had the same experience as you in the past, but with one of the more obscure browsers (Opera, maybe, or Safari before iPhone became popular). And I still have intermittent problems with JavaScript if I don't close the command with a semicolon. In this case, though, the live script was using class='whatever' instead of inline styles; I just made them inline for the sake of testing and eliminating class conflicts.

Either way, it's fixed now, but if anyone can explain why the second clear: both seemed to work, I'd appreciate it :-)