- This topic is empty.
January 13, 2015 at 10:34 am #193086
Hey guys! I’m having an issue to where when I attempt to stick an image to the bottom of a DIV, it’s instead going straight to the bottom of the page. Weird behavior for sure.
Ok so tried placing/embedding my code and it’s not working…I can’t even show my issue…
(Using Foundation Framework btw)January 13, 2015 at 10:38 am #193088
Please set up a live example on CodePen or otherwise.January 13, 2015 at 10:46 am #193089
Ok. Here you go…January 13, 2015 at 10:49 am #193090
In particular it’s that “Powered by Kaufman…” image.January 13, 2015 at 10:58 am #193094
Two things that I see.
- In the current example I loaded, there are no styles for `.stick-to-bottom`.
- `.stick-to-bottom`’s parent doesn’t have a height set
If you set the height to be the same as the parent of
.relative, and then give styles to
.stick-to-bottomyou should be set.
P.S. – if you save it out as a public pen, we can edit it and show you. Of course, it would be best to only have the portion of the code you need (a reduced test case).January 13, 2015 at 11:04 am #193095
I snatched ‘.stick-to-bottom’ styles out because they weren’t doing what I wanted. They’re there, but just commented out.
I’m afraid to give the parent height as it’s not the normal procedure for Foundation and I don’t want to mess anything up dynamically.
So my problem is the missing height? And there’s no way around this?January 13, 2015 at 11:05 am #193096January 13, 2015 at 11:06 am #193097
Oh you know what I just thought of? You can add relative to the
.row.groupelement, and then add in the absolute classes… technically you would only need to put the image as direct child to the
.row.groupelement and the other
<div>isn’t necessary.January 13, 2015 at 11:09 am #193098
While that does make sense, it messes up the blocking as I’m using the framework grid. So the relative will have to be on the 3rd (technically 4th) div that contains it. Or else I’m tampering with query breakdowns already in place.
Actually I take that back…it works…January 13, 2015 at 11:12 am #193101
Hmm I see I see. Is there any possible way to do this while keeping the IMG inside of the DIV?
PS How did you embed your Pen? When I tried, it gave me an error saying that CSS-Tricks blocked me.January 13, 2015 at 11:26 am #193103
Sure you could keep it inside the original
div, just take relative out of it.
As for embedding the pen, you have to be in edit mode with the three columns at the top and your screen at the bottom. Just copy the URL in on its own line and you’re good.January 13, 2015 at 11:29 am #193105
Completely vanishes once placed back into DIV and relative taken away. This is a pain.January 13, 2015 at 11:36 am #193106
No, it doesn’t disappear, it just has a height of 0 pixels since it has nothing inside. Absolutely positioned elements are removed from the flow (like floated ones).
Looking deeper in, the
.columnclass has a
position: relativeproperty already so it’s still inside there, but if you inspect it you’ll see the image above the top of the page there.
So we’re back to needing a height applied on its parent, or removing it, or doing something hacky…January 13, 2015 at 12:33 pm #193112
Well that was just pure laziness on my part lol. Thanks a lot Shane. I’ll continue working this out! :-PJanuary 13, 2015 at 12:48 pm #193115
Ok. Went with the height fix for it. Had to throw in some extra media queries, but it works. Thanks again for that insight.
- The forum ‘CSS’ is closed to new topics and replies.