ul CSS trick

by Melvin Ram

I had a problem. I had an image that I had floating to the left. Right next to it, I had content. Here’s what the code looked like:

    1 <img style="float:left" src="cover.gif" alt="" />
    2 blah blah blah blah blah blah blah
    3 <ul>
    4   <li>Item 1</li>
    5   <li>Item 2</li>
    6   <li>Item 3</li>
    7 </ul>

Simple enough, right? It should just work, right? Wrong!

When viewed in a browser, the above code will screw up your list. What do I mean by “screw up” the list? Here’s a  screenshot to demonstrate:

floating-image-w_-ul-problem

Notice, the bullet points will actually overlap with the image. Ugly! I tried adding margins, padding and a bunch of diff things to both the image and the ul element. Nothing fixed it!

I started hunting on Google and I ran into this page: http://www.webmasterworld.com/css/3697078.htm

The fix? Add “overflow: auto;” to the ul style. Simple! I love it!

Tagged as: ,

Leave a Comment