Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] IMG Sticking to Bottom of Page and not DIV

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #193086
    bmoneruiux
    Participant

    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)

    #193088
    shaneisme
    Participant

    Please set up a live example on CodePen or otherwise.

    #193089
    bmoneruiux
    Participant
    #193090
    bmoneruiux
    Participant

    In particular it’s that “Powered by Kaufman…” image.

    #193094
    shaneisme
    Participant

    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-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).

    #193095
    bmoneruiux
    Participant

    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?

    #193096
    bmoneruiux
    Participant
    #193097
    shaneisme
    Participant

    Oh 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.

    http://codepen.io/drainpip/pen/emvZdK

    #193098
    bmoneruiux
    Participant

    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…

    #193101
    bmoneruiux
    Participant

    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.

    #193103
    shaneisme
    Participant

    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.

    #193105
    bmoneruiux
    Participant

    Completely vanishes once placed back into DIV and relative taken away. This is a pain.

    #193106
    shaneisme
    Participant

    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 .column class has a position: 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…

    http://codepen.io/drainpip/pen/emvZdK

    #193112
    bmoneruiux
    Participant

    Well that was just pure laziness on my part lol. Thanks a lot Shane. I’ll continue working this out! :-P

    #193115
    bmoneruiux
    Participant

    Ok. Went with the height fix for it. Had to throw in some extra media queries, but it works. Thanks again for that insight.

Viewing 15 posts - 1 through 15 (of 16 total)
  • The forum ‘CSS’ is closed to new topics and replies.