CODEWITHSUNDEEP
htmlcss
Anthony
Anthony

Reputation: 3218

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

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?

Upvotes: 4

Views: 3467

Answers (1)

MrWhite
MrWhite

Reputation: 46002

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.

Upvotes: 13

Related Questions