List items run outside of list and div area

Question

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/

Answer 1

Do display: block; always... Never do display: inline; or display: inline-block;

To fix the Unordered List from pouring out of the DIV, try going into the CSS and apply this:

ul {
list-style-position: inside;
}

Answer 2

Make them display: block, not inline.

Answer 3

To fix the Unordered List from pouring out of the DIV, I would suggest going into the CSS and adding a min-width.

so, for example if your parent has a width:600px give the , within that div, a class and set a min-width:600px and this will keep the

items from stacking on top of one another and spilling outside the parent . worked for me.

Answer 4

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.