Stop floating with the end of a tag

Question

I want to create a text that floats left around an image. Next paragraphs should only float around the next image.

<div>
   <div style="float: right; padding: 0 0 1em 1em;">
      <img src="myImage1.png" .../>
   </div>
   <p>
       This text should float around the...
   </p>
   <p>
       ... above myImage1.png.
   </p>
</div>

<div style="clear: both;">
   <div style="float: right; padding: 0 0 1em 1em;">
      <img src="myImage2.png" .../>
   </div>
   <p>
       This text should float around the...
   </p>
   <p>
       ... above myImage2.png.
   </p>
</div>

I want to avoid having to add style="clear: both;" on the next div, but want the floating image automatically stop floating at the end of the first top-level </div>, so each div can have the same style class:

<div class="floatBlock">
   ...
</div>

<div class="floatBlock">
   ...
</div>

which especially becomes useful if there are -tags inside (the first floatBlock's image should not float below the h3):

<div class="floatBlock">
   ...
</div>

<h3>Lorem ipsum</h3>

<div class="floatBlock">
   ...
</div>

I hope to have described my goal understandable.

How to define the style for floatBlock so the nested images do not float outside?

possible duplicate of [CSS Float: Floating an image to the left of the text](http://stackoverflow.com/questions/5198392/css-float-floating-an-image-to-the-left-of-the-text) — AleshaOleg, Aug 10 '15 at 11:31

score 5 · Accepted Answer · answered Aug 10 '15 at 11:32

You should be able to add the clear with the after selector. You can add this in your CSS file:

.floatBlock:after {
    display: block;
    content: " ";
    clear: both;
    height: 0;
}

This is of course I guess. I have no proper way to test it without your CSS.

musefan · Answer 2 · 2015-08-10T13:13:23.427

4

There is no reason why you can't just have clear:both applied to all of the elements. So you could do it in your class like this:

.floatBlock{
    clear:both;
}

Here is a working example

If you need to cope with short test and big images, and also have other elements in between the floatBlock elements (as per comments), then it would make sense to put a clear element after each one. Like so:

<div class="floatBlock">
    ...
</div>
<div class="clear"></div>

.clear {
    clear:both;
}

Here is a working example

edited Aug 10 '15 at 13:13

answered Aug 10 '15 at 11:33

musefan

47,875
21
135
185

@ThomasS.: Why don't you just try it? But the answer is [yes](http://jsfiddle.net/9yyuy00n/1/) – musefan Aug 10 '15 at 11:47
This does not prevent the image from floating below the
.
– Thomas S. Aug 10 '15 at 11:51
@ThomasS.: What do you mean? Show me a working example that is what you want differently from what I gave you – musefan Aug 10 '15 at 12:39
Take your example, reduce the text of your first two paragraphs to a very short one, increase the first image's height, e.g. to 350x450, and add a
hello
before the second
. "hello" will be shown left beside the first image.
– Thomas S. Aug 10 '15 at 13:03

Stop floating with the end of a tag

2 Answers2

.

hello