clear float in the same element

Question

I have p.test with given width and float:left. This div takes only half of full width. So, if I create next element after p.test, it will go to the same line as p.test. I am using p instead of div, because this is related to tinymce staff and in my scenario divs cannot be use.

I want to write a CSS the rule: "everything that goes after p.test will start on the next line even if p.test doesn't take 100% of width and is floating to left".

It is something related to clearing float, but the problem is that I cannot use container or add clear:both after p.test in html layout (again - this is because tinymce editor is used). I need purely CSS solution that is done for "p.test" element or the "element that is next to p.test whatever it is". Maybe there is some other, I am not sure.

<p class="test"></p>
<p>Element that should be on the next line whatever it is</p>


.test {
    width: 60%;
    float: left;
}

Answer 1

You put clear: left on the first element that you don't want to bubble up beside the floated element.

.test + * { clear: left; }

or … since it has a fixed width, just don't float .test in the first place.

Answer 2

Most compatibility: http://jsfiddle.net/6AW2p/

p.test {
    width: 40%;
    float: left;
    background-color:red;
    clear:none;
}
.test + * {clear:left;} 

CSS3: (No IE 8 support) http://jsfiddle.net/6AW2p/1/

p.test {
    width: 40%;
    float: left;
    background-color:red;
}
.test + :not(.test){clear:left;} /* CSS3 -- Does not support IE 8 */

Answer 3

Doesn't sound to me like you should be floating in the first place.

http://jsfiddle.net/isherwood/wpBN4/

.test {
    width: 60%;
}