On 6/08/2009, at 5:26 PM, Debbie Roes wrote: >> >> #box { float: left; } /* will ensure that the box 'shrink-wraps' >> around you content. */ >> >> #wrapper { overflow: auto; } /* will ensure that your float is >> contained */ >> >> #footer { clear: both; } /* will ensure that your footer clears the >> floated box */ >> ______________________________________________________________________ > > > Thank you SO much for your prompt reply and suggestions! This works > and I > never would have thought to do these things... > > There is one additional problem now. The portrait image box is > aligned to > the left, not centered. I can't really use margin:auto; for the > #mainGal > div because I already have margin-left:185px to allow for the left > nav, and > adding margin:auto; to the #box div doesn't change anything. > > Any suggestions on how to fix this last detail? The client really > wants the > photo box to be centered above the footer.
A different approach... #mainGal { text-align: center; } #box { float: none; /* remove the float we added before */ display: inline-block; display: -moz-box; /* <== for firefox 2 */ } To make inline-block work in <IE8 you will need to use a conditional comment to set #mainGal to display: inline. As long as the element 'hasLayout' (which a div does by default) then it behaves like inline- block. If you don't like that and the images are always the same size (either portrait or landscape) then give #box a class ('portrait' or 'landscape') and set the left margin appropriately on each. ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/