[ownage]

This is not a fixed width layout. I have one or two CSS techniques applied to these images-- a shadow for all of them which requires floating, and there is also a caption for some of them.

http://matt.mw/passing_in_review3.html

I need to be able to center the last picture "with" the shadow in this layout, but am wondering how to do this. I managed to do it with two images (as you can see at the very top) using 2 divs within another div, but one image is really killing me with floating items.

Code:

.img-shadow {
float:left;
background: url(http://matt.mw/gmsaa/img_shadow/shadowAlpha.png) no-repeat bottom right;
margin: 10px;
}
.img-shadow img {
display: block;
background-color: #fafafa;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}

<div class="img-shadow"><img src="http://matt.mw/gmsaa/articles/passing_in_review/passing_in_review_images-012.jpg" /></div>

So without taking away this float & shadow, how do I place this image in the exact center when this layout is not fixed? Obviously text-align:center has no effect on floating items. Seems different positioning methods like "absolute" ruin my shadow.

Please help me out! Thanks.

[xEX3CUT1ONx]

Well why are you using an image for the shadow you could get the same effect using CSS then the floating wouldn't be an issue.

[mpjstuff]

I hope this isn't TOO late for you -- but I just joined the forum today.

I researched this issue of Centering, and I combined a few different solutions -- trying to distill the easiest and most comprehensive solution. The following was used to put a Flash presentation in a window, and to make the window as large as possible without "fullscreen" because Adobe Flash disables form input when in FullScreen mode. You could do this with only CSS and DIV -- but the Javascript was necessary for my project. So this maximizes a window, centers it and centers the flash file inside -- which can be rendered FOOBAR a lot more easily than simply centering an image.

Good Luck! You would think that Centering in a page would be a lot easier, but IE with it's Inner Window widths and such complicate this quite a bit -- so 100% of a screen must sometimes be discovered and written as an absolute value (depending on browser)....

I'm not yet sure about embedding HTML and code on this Forum, so I'll attach the file -- the CSS file comes first and would be "syles.css" that is linked to from the main web page.