On Jan 28, 2010, at 12:32 PM, David Hucklesby wrote:
> On 1/28/10 11:01 AM, Sean O' Shea wrote:
>> Hi all,
>>
>> I had a quick question regarding bottom aligning some images.
>>
>> The page in question looks like this:
>> http://whatsthepointeh.appspot.com/bottom-align/eyefi/tests/widget/robot/DayView.html
>> . (Give it a few seconds to fully render - there's quite a bit of
>> JavaScript on this page)
>>
>> I have landscape and portrait photos that need to be displayed and
>> I'd
>> like to be able to bottom align all photos without setting an
>> absolute
>> height on the individual photo divs (these photo divs have classes
>> "file dojoDndItem"). I've tried using vertical-align on the divs, but
>> that doesn't seem to work - any ideas on whether what I want is
>> accomplishable?
>>
>
> Something else that just occurred to me... If you just left the images
> as inline elements, they would automatically line up aligned on the
> baseline of the line boxes they create. DIV elements are blocks, so
> naturally fall one below another, creating your problem.
>
> As I have no idea why you are wrapping each image in a multitude of
> DIVs, such a simple solution may not work for you. But it might...
>
> Cordially,
> David
I see what you mean about my images having a plethora of divs - its
related to some drag and drop functionality and the fact that I need
to overlay progress bars and various icons on the images themselves.
If anyone is interested, I was able to get the desired result with
some tricky inline-block styling:
#dayView #dayViewNode {
height:100%;
width:100%;
}
#dayView #dayViewNode .fileList .file {
border:0.25em solid #2B2B2B;
clear:none;
display:inline-block;
float:none;
height:auto;
margin:0 6px 0 6px;
position:relative;
text-align:center;
vertical-align:bottom;
width:168px;
}
#dayView #dayViewNode .fileList .crop {
height:auto;
}
#dayView #dayViewNode .fileList .file img {
vertical-align:top;
}
> --
>
> ______________________________________________________________________
> 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/
______________________________________________________________________
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/
