setting width of li problem

[nofel]

hi folks, i have couple of listed item's which i want it wrap when reached a certain width. i m applying the width but its not happening. does li support widths? or is there is another work around. here is my css

ul.dockcaption{width:1200px; position:absolute; margin-top:30px; left:-20px;}
.dockcaption li{display:inline;margin:10px; margin-left:27px; width:100px}

i did tried to give one li a lot of text but it doesn't wrap to next line when reached maximum width. am i missing something or li doesn't work with width

[donboe]

It does work with width.

Did you try

display: block;

instead of

display: inline;

Try to read the definitions for display block and inline

W3schools

[RyanReese]

As the above poster indicted, display:inline elements (or elemenets with that generated display value) are inline elements. And as a result of them being inline, widths/heights do not apply to them. You could either do one of these options (note, that IE6/7 need a fix/hack for it to work)

1) Change your setup to display:inline-block
2) Change your setup to floats isntead of display:inline;

[nofel]

thanks. that help though i fail to achieve margin:0 auto; on text, i want text to center, for now i am using margin-left:50px; on dockcaption.li and it isn't generic.
what i m trying to achieve here is when something is commented its image and its respective text, the other element slides in center to fill in the gap. i bet its confusing now but i wonder why i can't get the text to be center of screen. here the link
P.S, don't paste the whole code here just point me out as its personal and none indexded. thanks

[RyanReese]

If you want the text to be centered within the <li>, just give the parent text-align:center