Difference between 'visibility: hidden' and 'display: none'
As a brief aside, note that 'visibility: hidden' is different from 'display: none'. The 'visibility: hidden' makes the element invisible, but the element is still occupies space in the layout (i.e. it's rendered as an empty box), whereas the 'display: none' removes the element entirely from the render tree such that the element is invisible and is not part of layout.