If a div has "clear:right", nothing should float to the right of it, should it?
css, css-float
Solution
The `clear` property doesn't prevent elements from being placed in that space after the cleared element. It prevents the element from being placed where there are already elements floated to the that direction before it. Adding a `clear:left` to `div.Duration` would make it be placed below the navy box. Adding a `<br/>` before the duration might solve your problem, or, as you already said in your question, you could use another container div for the last three divs.
Problem
I seem to have gotten confused as to what the css "clear" keyword means. I have a number of div elements, all with "float:left". The second last div element also has "clear:right". I thought that would cause the subsequent element to go to the next line. But for me, it doesn't. Here's my example: ``` <div class="Section"> <div class="Thumbnail"></div> <div class="Number">0</div> <div class="Title">ShopTVC Wallace and Gromit WOA 6Apr11</div> <div class="Duration">00:00:32</div> </div> ``` Looks like this: I am trying to make the duration ("00:00:32"), appear on the next line, to the right of the thumbnail (the blue rectangle). I know that I could put the last three divs into another container div, but the purpose of this question is to understand why "clear:right" doesn't stop the duration from floating on the right of the title. Here's the CSS: ``` div.Section { overflow:auto; background:cornsilk; border:2px solid navy; padding:12px; } div.Section div.Thumbnail { width:64px; height:42px; background:SteelBlue; foreground:Navy; } div.Number { width:16px; margin-left:6px; } div.Duration { margin-left:22px; } div.Section div { float:left; } div.Section div.Title { color:DarkGreen; clear:right; } ``` And, of course, the jsfiddle link: http://jsfiddle.net/8J7V6/3/