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/

Bonhomie

The link has stopped working, the context is gone. – Joliejoliet

Answer 1

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.

Phenothiazine

Hi PeeHaa,that solution worked but I'd be interested to know why that way works when display:inline doesn't? – Bonhomie

@Chrism lemme check your CSS and I will get back to you. – Phenothiazine

@Chrism very interesting question, to which I do not have an answer. I've created a new question about this if you are interested. – Phenothiazine

@Chrism @Phenothiazine - I think it's because there's no whitespace between the li tags. Since there's no whitespace, the browser has nowhere to wrap the content until it's forced to wrap at the edge of the browser width. – Lowbred

Answer 2

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

Yvette

Answer 3

Make them display: block, not inline.

Convention

While that does make sure it doesn't go out of the container I don't think this is what the OP wants :P – Phenothiazine

My bad, totally thought OP didn't want them horizontal at all. I need coffee. :( – Convention

Answer 4

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.

Aikido