Spread Out Footer Contract For Free

Using Flexbox in CSS we can fix it very easily with following steps. First set the min-height of body to 100vh. ... Set the body display to flex display: flex; and flex-direction to column flex-direction: column; . Select footer element (of whatever you want to stick to bottom) and set top margin to auto margin-top: auto; .

You can use some tips for making a good footer, such as keeping the design simple, including the basic contact information, adding a call-to-action button, using some graphic elements, writing the copyright notice, etc. Adding this data will help you create an appealing footer.

The same principle applies towards the footer. Move the footer text below the closing div for the <div class="Layout container">. This will make the footer full width.

Your footer doesn't have any width defined. You've given it a fixed position and not supplied a width. position: fixed; is only as large as the content it contains unless you specify otherwise. Add width: 100%; to the CSS for the footer.

When the footer margins are too narrow or the padding is too wide, the footer position shifts and can move to the middle of the Web page. One easy solution is to remove the margins and padding entirely, so that those footer properties correspond to the rest of the coding.

It's because the body tag has always 100% width of the window as default. In your case it means, that your #container tag has also 100% width of the body tag (the window), and so does also your #footer. The DIV #body is broader than the body, which will not grow automatically if an element is broader than itself.

We'll use flexbox and margin to push the footer at the bottom of the screen. Set the container to display: flex; . ... Change the containers' flex-direction: column . ... Give the container full height with min-height: 100vh; . ... Finally, give the footer enough margin with margin-top: auto; .