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/
