- This topic is empty.
-
AuthorPosts
-
January 13, 2015 at 10:34 am #193086bmoneruiuxParticipant
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 #193088shaneismeParticipantPlease set up a live example on CodePen or otherwise.
January 13, 2015 at 10:46 am #193089bmoneruiuxParticipantOk. Here you go…
http://codepen.io/bmoneruiux/live/0e2e720b4cd3cd178a20b65c2cae8e1e
January 13, 2015 at 10:49 am #193090bmoneruiuxParticipantIn particular it’s that “Powered by Kaufman…” image.
January 13, 2015 at 10:58 am #193094shaneismeParticipantTwo 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-bottom
you 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 #193095bmoneruiuxParticipantI 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 #193096bmoneruiuxParticipantJanuary 13, 2015 at 11:06 am #193097shaneismeParticipantOh you know what I just thought of? You can add relative to the
.row.group
element, and then add in the absolute classes… technically you would only need to put the image as direct child to the.row.group
element and the other<div>
isn’t necessary.January 13, 2015 at 11:09 am #193098bmoneruiuxParticipantWhile 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 #193101bmoneruiuxParticipantHmm 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 #193103shaneismeParticipantSure 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 #193105bmoneruiuxParticipantCompletely vanishes once placed back into DIV and relative taken away. This is a pain.
January 13, 2015 at 11:36 am #193106shaneismeParticipantNo, 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
.column
class has aposition: relative
property 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 #193112bmoneruiuxParticipantWell that was just pure laziness on my part lol. Thanks a lot Shane. I’ll continue working this out! :-P
January 13, 2015 at 12:48 pm #193115bmoneruiuxParticipantOk. Went with the height fix for it. Had to throw in some extra media queries, but it works. Thanks again for that insight.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.