How to make border for UL if Li has style "float:left;"?

Question

My css for ul is:

ul {list-style-type: none; margin:auto; border-top: 1px solid #0093a7; border-bottom: 1px solid #0093a7; margin: 20px 0;}
ul li {float:left; padding:5px;}

The UL tag:

<ul>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
</ul>

Now both borders are on the top of the UL. How to make bottom border then?

Answer 1

You need to apply overflow:hidden to your ul so that your floats are cleared and are contained within the ul.

Currently your ul is collapsing since it contains only floated elements.

If you need to support IE6(?!) then you will need to make sure your container (ie. ul) hasLayout for the overflow trick to work. You can do this by applying a width.