Forums

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

Home Forums CSS [Solved] Help positioning a div at the bottom of viewport.

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #206083
    WonderJunky
    Participant

    Hey guys

    I’m trying to position a div at the bottom of the viewport.
    Here is a live example:
    http://famous.org/

    And here’s a sketch I made to illustrate this:
    http://i.imgur.com/T1i12pF.jpg

    I know how to make a div occupy 100% of the viewport. I’m just having trouble positioning the “social icons/subscribe” div at the bottom. Just to clarify, I’m NOT trying to make a sticky footer. The social icons div will be at the bottom only when the page first loads.

    Any help would be much appreciated. Thanks!

    #206087
    WonderJunky
    Participant

    It’s funny that you mention that. I was just playing around with flexbox and got it sorted out. Used a different method than the famous site though.

    Two divs – The parent div is set to display: flex, and align-items: flex-end. The child div contains the content.

    Thanks for the reply boss.

    #206091
    Paulie_D
    Member

    I happen to have one…I’m really getting into flexbox.

    http://codepen.io/Paulie-D/pen/XbONwV/

    #206103
    Paulie_D
    Member

    Will have to come back to this later though …

    Yeah…I’ve been inspecting famous.org and I can’t reproduce it in Codepen.

    #206133
    WonderJunky
    Participant

    Some fantastic solutions here. Thanks guys!

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.