How to Float to the Bottom of a Div

Save

Divisions or "divs" are central to the function of your website's Custom Style Sheet, which allows you to manage the look of all pages on your website. If you want to specify that a small div should sit as low within the larger div "container" as possible -- a link button within a pane or frame, for example -- float the small child div to the bottom of the larger parent div using a combination of absolute and relative positioning.

  • Log in to your Web host. Navigate to your file manager, click the name of the CSS file and select "Edit."

  • Scroll down to the sections of the CSS dedicated to the divs involved in the float. For the sake of example, use the names "bigone" and "smallone."

  • Input a relative positioning element, "position: relative," within the parent div as follows:

    bigone {position: relative; border: 2px solid #000}

  • Add an absolute bottom position element, "position: absolute; bottom: 0" to the child div like so:

    littleone {position: absolute; bottom: 0}

    This floats the child div as far down within the parent div as possible -- and no matter where the parent div ends up within the page as you add and remove other divs, thanks to the parent's relative positioning.

  • Save the CSS file and view your Web page in a new browser tab or window to confirm the positioning has worked.

References

Promoted By Zergnet

Comments

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!