How to make a border for UL if Lee has a "float: left" style?

Question

My css for ul:

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;} 

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 top of UL. How to make a lower border?

Answer 1

You need to apply overflow:hidden to your ul so that your floats are cleaned and contained in ul .

Currently, your ul reset, as it contains only floating elements.

If you need to support IE6 (?!), You will need to make sure that your container (i.e. ul ) hasLayout for the overflow trick. You can do this by applying width.