If a div has "clear:right", nothing should float to the right of it, should it?

Question

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/

Answer 1

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.

Answer 2

ahruss's answer is the correct one, but I also noticed no one really answered your question. Basically clear:left refers to left floating elements. clear:right refers to right floating elements.

Since your element is floating left, not right, clear:right won't affect it.

The other thing you could do is wrap the two text elements in a separate div from the blue box, float that container div in and the blue div, then when you float the two text elements, your clear:left code will put the date under the text still within your container div and not under the blue image to it's left.

Like this:

<div class="Section">
   <div class="Thumbnail"></div>
   <div class="TextContainer">
      <div class="Number">0</div>
      <div class="Title">ShopTVC Wallace and Gromit WOA 6Apr11</div>
      <div class="Duration">00:00:32</div>
   </div>
</div>

and add this to your css:

div.TextContainer {
   float:left;
}

Add in whatever other visual styles you need.

Answer 3

There isn't anything floating to the right of it. The Problem you're facing is that you already sent all your content prior to the time, and then you're telling the time to float to the left. It's still floating to the left, it's just stacking on top of the content that's already there to the left.

But yes, clearing to the right makes that element break down past all elements which are floated to the right before it. Clear does not affect elements after it.

Have you tried using a simple <br /> after your title?

Answer 4

I have used padding and margin. If it is not possible to use in your case then the following solution will not be appropriate.

http://jsfiddle.net/8J7V6/5/