-
Replies
I have an image that is higher than its parent div. I want it to align to the bottom of the div and "stick out" of the div at the top. Can anyone help me here?
Marc McGee
almost 6 years ago
Thanks for posting Rafi. I've been searching for a solution to a similar problem. This just makes the column taller when I tried it. I applied the class of thing to my image and even tried wrapping the image in a div class="thing", and also tried applied class of thing to the column.
What am I doing wrong?
Marc McGee
almost 6 years ago
The only way I can prevent the column from getting taller is by doing the following. But the code below causes the image to rest on the top of the containing div — not rest on the bottom and extend above.
.mylogo { overflow: visible; } .mylogo img.thing { position: absolute; right:0; bottom:0; }
<div class="large-4 large-pull-8 columns show-for-large-up mylogo"> <a href="[[~3]]" title="Home Page"><img src="/assets/site_graphics/logo.png" class="thing"></a> </div>
Marc McGee
almost 6 years ago
This seems to be working better. A straight 0 with no measurement definition has no affect. Adding em and just working from the top and applying a negative em allowed for more accurate positioning.
Not sure if this is the best way or not. I would be happy just to have absolute centering vertically.
No sure also that right:0; has any affect. My instinct would be to either remove and hope for align left by default, or set left and right to auto.
.mylogo { overflow: visible; } .mylogo img.thing { position: absolute; right:0; top:-2em; }
<div class="large-4 large-pull-8 columns show-for-large-up mylogo"> <a href="[[~3]]" title="Home Page"><img src="/assets/site_graphics/logo.png" class="thing"></a> </div>
To Align an image to the bottom of a div you can use css:
div img.thing {
position: absolute;
right:0;
bottom:0;
}