li doesn't expanded

i have 2 li and each of them should hold 2 right floated divs , but the are not expanded to hold the divs properly as shown in the screenshot in the url below

http://rapidshare.com/files/436706262/li_issue.jpg

the HTML code is <div class="anothernews">
<ul>

<li><div><img src="Images/smallimg.jpg" /> </div>
<div><p><a href="#">4221 حالة إصابة مكتشفة بالإيدز فى مصر
</a></p></div>
<div class="clear"></div>
</li>


<li><div><img src="Images/smallimg.jpg" /> </div>
<div><p><a href="#">4221 حالة إصابة م
كتشفة بالإيدز فى مصر
</a></p></div>
<div class="clear"></div>
</li>

<div class="clear"></div>
</ul>
<div class="clear"></div>
</div><!--end of anothernews div-->




The CSS code
.anothernews{ width:230px; float:right; margin-right:15px}

.anothernews li{ list-style:none; width:100%; border:1px solid #000000; height:100%;}
.anothernews li div{ float:right; width:48% }
.anothernews li div+div{ margin-right:8px}

i have attached the file

I can't understand what is wrong. I've tested your code and divs are shown, picture and link in both li items.

Hello haithamedrees23,
You can't put divs inside your li's. Check your code with the validator.

See the links about validation in my signature line below.

W3schools has this about lists (http://www.w3schools.com/HTML/html_lists.asp).

You can't put divs inside your li's.

really? the DTD doesn’t forbid that.

You haven't posted your whole code here, but I suspect the issue is with your .clear divs. If you have:

.clear{clear:both}

then this div:

<li><div><img src="Images/smallimg.jpg" /> </div>
<div><p><a href="#">4221 حالة إصابة مكتشفة بالإيدز فى مصر
</a></p></div>
<div class="clear"></div>
</li>


gets clear:both from the css at the top, but also inherits float:right from:

.anothernews li div {
float: right;
width: 48%;
}

So the clearing div is in itself floated and consequently doesn't clear the float. Making the clear div:

.clear{clear:both;float:none!important}


fixes the issue. If this doesn't fix it, then we need to see all your code, or preferably a link to your page.

(The validator allows a div within an li, but not one as a direct child of a ul)

really? the DTD doesn’t forbid that.

Who knew? It is valid. I'm looking for a semantic use for that now...

hello SB65

thanks a million , your solution fixed the problem , but why i should add !important?


also thank you all for your efforts, really appreciate :)

Without the !important, the float will remain since .anothernews li div as a selector is more specific than .clear. Adding !important ensures that the float:none in .clear css takes precedence.

Incidentally, you can see this in Firebug if you look at the css applied to that div.