[css-d] make image bottom-align?
Is there a way to make an image inside a parent div bottom-align? Or top-align for that matter? my method has been to give margin-top values to the image until it lands where I want but it’s kind of silly if there’s a declaration that will have it go to the bottom and be done with it! I have tried vertical-align:bottom; but this either isn’t working on my page or I mis-understand the implementation. tried on both image, then on its parent; neither has an effect. thank you for any clues! John __ css-discuss [css-d@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/
Re: [css-d] make image bottom-align?
John,
give the parent div:
position: relative; in it's styling, then use absolute positioning for the
image: img { position: absolute; bottom: 0; left: 0;}
Rod Castello
On Wed, Jul 23, 2014 at 4:26 PM, John j...@coffeeonmars.com wrote:
Is there a way to make an image inside a parent div bottom-align? Or
top-align for that matter?
my method has been to give margin-top values to the image until it lands
where I want but it’s kind of silly if there’s a declaration that will have
it go to the bottom and be done with it!
I have tried vertical-align:bottom; but this either isn’t working on my
page or I mis-understand the implementation.
tried on both image, then on its parent; neither has an effect.
thank you for any clues!
John
__
css-discuss [css-d@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 [css-d@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/
Re: [css-d] make image bottom-align?
On Wednesday, July 23, 2014, John j...@coffeeonmars.com wrote: Is there a way to make an image inside a parent div bottom-align? Or top-align for that matter? my method has been to give margin-top values to the image until it lands where I want but it’s kind of silly if there’s a declaration that will have it go to the bottom and be done with it! I have tried vertical-align:bottom; but this either isn’t working on my page or I mis-understand the implementation. tried on both image, then on its parent; neither has an effect. Not knowing your exact situation, could you try display:table; and vertical-align:bottom; on the parent ? -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@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/
Re: [css-d] make image bottom-align?
*so* sorry to have not given a link… it is: http://www.coffeeonmars.com/170_su/template/home.html the image is controlled by #social-main and it’s containing div is #main_header Thank you, John __ css-discuss [css-d@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/
Re: [css-d] make image bottom-align?
Le 24 juil. 2014 à 11:09, John j...@coffeeonmars.com a écrit :
*so* sorry to have not given a link…
it is: http://www.coffeeonmars.com/170_su/template/home.html
the image is controlled by #social-main and it’s containing div is
#main_header
As someone already mentioned, this will work fine in this case:
#main_header { position: relative; }
#social-main { position: absolute; bottom: 0; right: 0; } /* -- the image */
Philippe
--
Philippe Wittenbergh
http://l-c-n.com
__
css-discuss [css-d@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/
Re: [css-d] make image bottom-align?
On Jul 23, 2014, at 7:23 PM, Philippe Wittenbergh e...@l-c-n.com wrote:
As someone already mentioned, this will work fine in this case:
#main_header { position: relative; }
#social-main { position: absolute; bottom: 0; right: 0; } /* -- the image */
Yes, and thank you, Rod and Philippe…that does work.
John
__
css-discuss [css-d@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/
Re: [css-d] make image bottom-align?
On Wed, 23 Jul 2014, John wrote: it is: http://www.coffeeonmars.com/170_su/template/home.html the image is controlled by #social-main and it’s containing div is #main_header http://t.cfaj.ca/pictest/ -- Chris F.A. Johnson, http://cfajohnson.com__ css-discuss [css-d@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/
Re: [css-d] make image bottom-align?
On Jul 23, 2014, at 7:38 PM, Chris F.A. Johnson ch...@cfajohnson.com wrote: On Wed, 23 Jul 2014, John wrote: it is: http://www.coffeeonmars.com/170_su/template/home.html the image is controlled by #social-main and it’s containing div is #main_header http://t.cfaj.ca/pictest/ Chris, thank you for that excellent and illuminating example.. I notice you don’t put your class names in “ “ I had no idea this was OK to do.. John __ css-discuss [css-d@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/
