• The concept of taking a footer that more than likely doesn’t sit at the bottom of a screen comfortably and forcing it to stay put at the bottom of the screen.
• This is ideal if you have information there that you would like people to have a constant view on. Ie, social links, navigation links, contact information

<footer id=”footer”>
Content goes here.
</footer>

#footer {
  position:fixed;
  left:0px;
  bottom:0px;
  Height:30px; <!–Is it needed? Play around with it –>
  width:100%;
}

Flexbox – via CSS Tricks by Chris Coyier

Twitter
@SchaffenCreate
@tommnorman

Website: https://www.schaffencreative.com

The post Eps 35: Fixed Position Footer appeared first on Schaffen Creative.

If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!!

If you leave a good comment it could end up on the front page of the site!

http://www.Webdevpod.com for all the content and links

@TNPWDesign

@tommnorman

DreamHost promo code – tnpw
<footer>
<div class=”footer-box-1″>
</div>
<div class=”footer-box-2″>
</div>
<div class=”footer-box-3″>
</div>

<p id=”copyright”></p>
</footer>

<style>

#center {
width: 960px;
}

footer {
clear: both;
background: #7c765b;
color: #FFF;
height: auto;
padding: 10px;
}

.footer-box-1 {
width: 31%;
background: red;
color: black;
float: left;
padding: 5px 4px 5px 4px;
margin: 5px;
height: auto;
font-size: 1.2em;
}

.footer-box-2 {
width: 32%;
background: red;
color: black;
float: left;
padding: 5px 4px 5px 4px;
margin: 5px;
height: auto;
font-size: 1.2em;
}

.footer-box-3 {
width: 31%;
background: red;
color: black;
float: right;
padding: 5px 4px 5px 4px;
margin: 5px;
height: auto;
font-size: 1.2em;
}
footer p#copyright {
float: none;
clear: both;
margin: 15px 10px 0px 0px;
font-size: 1.3em;
text-align: right;
line-height: 2em;
}

</style>

The post Eps 18: Coding A Footer – Talking HTML appeared first on Schaffen Creative.