garbled items in a horizontal list with css

Question

Hi I have made a page in which i m using a list to display the items horizontally

Now i can see the result in the page here

But when i drag and make the browser window short i get a garbled list as in the scrren-shot here

http://pradyut.dyndns.org/WebApplicationSecurity/people_ss.JPG

I m using a css in the list as : -

#navlist li
        {

            padding: 1em;
            float: left;
            list-style-type: none;
        }

at the end of the list i m using a clearing div

#clear-both 
{
   clear: both;
}

Any help

Thanks

Pradyut

Answer 1

Hi,

I can't seem to access your site.

Try using display:inline instead of float:left

#navlist li
{
padding-right: 1em;
display: inline;
list-style-type: none;
}

Answer 2

The problem is the varying heights of each LI element. If you give them all a common height, the layout flows properly when the window is resized:

#navlist li
{
    height: 100px;
    padding: 1em;
    float: left;
    list-style-type: none;
}

Answer 3

well could solve the problem using a min-height in the another div css

  #another 
  {
      padding: 5px;
      background-color: green;
      min-height: 75px;
  }

thanks...