Welcome to WebmasterWorld Guest from 34.238.189.171

Forum Moderators: not2easy

Message Too Old, No Replies

float: left not ending with clear: both

     
10:53 am on Feb 11, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1149
votes: 116


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?
11:10 am on Feb 11, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 25, 2005
posts:2091
votes: 370


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.
3:58 pm on Feb 11, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4399
votes: 314


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.
7:08 pm on Feb 11, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 25, 2005
posts:2091
votes: 370


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.
2:03 am on Feb 12, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1149
votes: 116


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 :-)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members