0

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. enter image description here 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;} enter image description here 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 enter image description here enter image description here

Anuj
  • 333
  • 4
  • 14

1 Answers1

0

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

See also

Zeta
  • 103,620
  • 13
  • 194
  • 236
  • Thank you a million!!!!!!!!! I was struggling with this for more than a year and finally got the answer. thanks again. Cheers stackoverflow – Anuj Mar 18 '12 at 17:23
  • Actually, I think a better solution would be to "self clear" the `li`:s using either `overflow: hidden` or another clearfix method if `overflow: hidden` isn't suitable. – powerbuoy Mar 18 '12 at 17:37
  • @powerbuoy can you please explain it a little more like what should be the exact CSS or html? – Anuj Mar 18 '12 at 17:42
  • 1
    All you need to do is set `li {overflow: hidden}`. Parents of floated element won't grow with their children unless the floats are cleared. A few years ago you'd normally add a `
    ` after floated elements but it's easy to do with just CSS and doesn't require an unnecessary `div`. If you google "clearfix" you'll find several other ways of clearing floats but `overflow: hidden` works cross-browser and requires the least amount of code. Edit: In this fiddle: http://jsfiddle.net/aWS4h/ you can see the difference between a cleared float (first two `li`s) and none-cleared.     – powerbuoy Mar 18 '12 at 17:45
  • @Anuj: See http://www.w3.org/TR/CSS21/visuren.html#block-formatting and http://stackoverflow.com/questions/4910075/why-overflow-hidden-clears-a-float ;). – Zeta Mar 18 '12 at 19:06