li doesn't expanded

[haithamedrees23]

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



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}

[haithamedrees23]

i have attached the file

[paolo1]

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

[Excavator]

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.

[Dormilich]

Originally Posted by Excavator

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

really? the DTD doesn’t forbid that.

[SB65]

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)

[Excavator]

Originally Posted by Dormilich

really? the DTD doesn’t forbid that.

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

[haithamedrees23]

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

[SB65]

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.