htmlcssoverflowhtml-listsword-boundaries

List items run outside of list and div area

I'm having an issue with a menu un-ordered list. Whereby the list items are over running the <ul> and <div> boundaries and only starting the next line once it has reach the edge of the screen.

Heres the website: http://finalonline.co.uk/mypics/gallery/categories/

Solution

  • You can use float: left; on the lis instead of display: inline;.

    Just remember to also use overflow: hidden; on the parent element (the ul).

    Another option would be to use: display: inline-block, but I'm not 100% sure about the browser support.