Keeping Footer at bottom of page or below content (HTML)

https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/

I always forget how to do this, but feel like each half decade that I need this, there is a new way to do it.

Center div with table content and fit to content

style="border: 1px solid black; display: table; padding: 0px 25px 25px 25px; margin-left: auto; margin-right: auto;"

The trick for me is the "display: table" portion which seems new to me but did exactly what I wanted it to do. I wanted a div containing a table to be centered into the middle of the page.

Without the display parameter, the div defaults to the full width of its parent container which then obviously would not have margins to auto-fill. Floating the div would only keep it to the left (obviously but still had to try). The stackoverflow articles also contained some other alternatives but this one seemed cleanest for what I needed.


Reference
http://stackoverflow.com/questions/450903/make-div-width-equal-to-child-contents
http://stackoverflow.com/questions/19620051/how-do-i-let-width-of-table-determine-width-of-entire-page

Work Life: Correcting 100% Width Text Input to Fit into Container

I always find it odd that the default values of HTML for textboxes (aka text inputs) when you set the width to 100% always seem to be wider than than its container. 

By default, you would think that it would either contain the entirety of the textbox or spill over on all sides of the textbox. In the latter case, I expect to see overlap on the left as well as on the right.

To correct this, set your textbox style to the follow:

input

{

    margin: 0px;

    padding: 0px;

    border: 0px;

}

Default

Corrected

This happens in both IE10 and Google Chrome 33.0.1750.117 m.