I seem to have hit a wall with this layout issue:
I've got a specifically positioned <div id="content"> with a <ul id="grid"> inside of it. Each <li> of the grid has an <a> with an <img> in it (thumbnails), linking to the larger image. This forms a decent image grid, flexible in size as the <li> elements wrap in smaller window sizes. Pretty basic, degrades nicely, etc...
The problem is that now I would like to center the grid within the <div>. I am setting the <ul> to float: left; so that it contracts to the size of the contained items instead of the default 100% width. I then use position: relative; right: 50%; on it, and then position: relative; left 50%; on the <li>. This should have the effect of moving the list centered in the div (you can get a better idea of what I'm going for from reading this article), but the problem is that the <ul> is trying to stretch as wide as it can to accommodate the overflowing list, and is therefore wider than the area of its containing elements. The end result is that the calcultions are thrown off, and my grid isn't centered.
If that needs clarification, I'll do my best, but the question is: is it possible to force a containing element (in this case a <ul>) to shrink to the size of its child elements in a situation where wrapping is occurring? I'm trying to avoid javascript completely.