Question

I’m stuck with a problem and hope stackoverfolw community can help me.

I want to put images with texts in listed order, so I’m using ul>li list. My problem begins when I write a paragraph that has less text than the image height, the next paragraph comes just next to it which I don’t want. I know it is not well described so I’m attaching a image of it.

Here is the HTML of that screenshot

<ul><li>
<h2>title</h2>
<img src="" class="alignleft" width="200px"/> My text content
</li>
repeat the same again
</ul>

css for alignleft is

.alignleft{float:left;}

If I set the CSS to .alignleft{float:left;clear:both} then this problem solves but another problem rises.

Here is a screenshot of listed items styled with .alignleft{float:left;clear:both;}

The ad on the right has .alignright{float:right;} style. Because of the clear:both style there is no content with the ads.

Is there any option so that I can achieve both? Like the images below

Answer 1

Use .alignleft{float:left;clear:left} to clear only the left directed floats.

See also

• All about floats (article about using float and clear)
• CSS 2.1: 9.5.2 Controlling flow next to floats: the ‘clear’ property:

clear:left: The clearance of the generated box is set to the amount necessary to place the top border edge below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.