Ruby on Rails Notes » css http://railsnotes.com A code-heavy brain dump of stuff I come across working on Ruby on Rails projects including Models, ActiveRecord, Views, Controllers, RESTful rails, deployment, server stuff, etc. Sun, 29 Aug 2010 23:45:16 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 ul CSS trickhttp://railsnotes.com/88-ul-css-trick/ http://railsnotes.com/88-ul-css-trick/#comments Tue, 10 Feb 2009 22:29:07 +0000 Melvin Ram http://railsnotes.wordpress.com/?p=88

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!

]]> http://railsnotes.com/88-ul-css-trick/feed/ 0