Ok, imagine three thumbnail images laid out horizontally. The first should float left, the third float right, and the middle thumbnail float between the two.
On a fixed width site, I can easily set up a class called .center_thumb that floats left, but has a left margin of x number of pixels. This works great, again, for fixed width sites.
However on an elastic layout, the middle thumbnail won't stay centered, simply because the margin is explicitly set (above in pixels).
In the .center_thumb class, I tried to set the left and right margins to auto, but it just floats left, if I take the float out, of course it goes back into the natural flow of the document.
Here is some random code to get you an idea of what I've been doing, any suggestions would be helpful.
float:left; /* if I take this out, goes back into natural flow */
margin-left:50px; /* this works ok for fixed sites */
margin: 0px auto 0px auto; /* tried changing to auto, and commenting out the margin-left line (above), but doesn't center */
<div class="thumbnail">Left Column.</div>
<div class="thumbnail center_thumb">Center Column</div>
<div class="thumbnail right_thumb">Right Column</div>
I just typed up the above as a slimmed down example --- figure the reader would get the idea.
Thanks in advance!