CODEWITHSUNDEEP
htmlcsspositionhtml-lists
avladev
avladev

Reputation: 13

Li over floated div

I have div.content that holds div.images which is left floated and next to it is a list with couple of items.

The problem is that li's apear over div.images element. I've tried to make list inline-block but in this case items that appear under the div.images are positioned next to the right edge of div.images.

http://jsfiddle.net/kmZ3X/

Any idea?

Upvotes: 0

Views: 307

Answers (4)

eli
eli

Reputation: 11

<div class="content">
 <img alt="Desert" src="images/Desert.jpg"/>
 <p>sth.</p>
</div>

 

div.content img
   {display: block;float: left; margin-right: 10px;border: solid 1px #999;padding: 5px; }

if you have a list instead of paragraph it will be same. if you have any problem you can ask me again. thank you.

Upvotes: 0

s_p
s_p

Reputation: 4693

this will make it appear below the images
css:

 .content p, .content ul {clear:both}

Upvotes: 0

Forty-Two
Forty-Two

Reputation: 7605

add 

ul{
float: left
}

That should do it

Upvotes: 0

mqchen
mqchen

Reputation: 4193

Try list-style-position: inside on the li elements.

For example: http://jsfiddle.net/mqchen/psJyh/

Upvotes: 1

Related Questions