Wide footer : Footer « CSS Controls « HTML / CSS






  1. HTML / CSS
  2. CSS Controls
  3. Footer

Wide footer

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>2 Breed</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
  margin: 0px;
  padding: 0px;
  background: #414141
}

#topContentWrap {
  width: 100%;
  margin: 0px;
  padding: 0px;
  float: left;
  background: #f9f7db url(2-breed-images/bodyBg.jpg) repeat-x
}

#topContent {
  width: 928px;
  margin: 0 auto;
  padding: 0px
}

#logoPanel {
  width: 75px;
  height: 740px;
  margin: 0px;
  padding: 0px;
  float: left;
  text-indent: -9999px;
  background: url(2-breed-images/globalpic.jpg) no-repeat
}

#logoPanel h1 {
  width: 75px;
  height: 740px;
  margin: 0px;
  padding: 0px;
  float: left;
  text-indent: -9999px;
}

#aboutPanel {
  width: 216px;
  height: 715px;
  margin: 0px;
  padding: 0px;
  float: left;
  background: #cd4007 url(2-breed-images/globalpic.jpg) no-repeat -77px
    -494px
}

#home {
  width: 47px;
  height: 110px;
  margin: 0px;
  padding: 0 0 0 169px;
  float: left
}

#home a {
  width: 47px;
  height: 36px;
  margin: 0px;
  padding: 56px 0 0 0;
  float: left;
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
  color: #646464;
  line-height: 13px;
  text-align: center;
  text-decoration: none;
  background: url(2-breed-images/homeBg.gif) no-repeat
}

#home a:hover {
  height: 36px;
  padding: 74px 0 0 0;
  background: url(2-breed-images/homeBg.gif) no-repeat -48px 0
}

#aboutPanel h2 {
  width: 170px;
  margin: 199px 0 0 0;
  padding: 0 0 0 24px;
  float: left;
  font-family: Arial;
  font-size: 26px;
  color: #FFFFFF;
  line-height: 30px;
  font-weight: normal
}

#aboutPanel h3 {
  width: 170px;
  margin: 8px 0 0 0;
  padding: 0 0 0 24px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #ffe996;
  line-height: 19px;
  font-weight: bold
}

#aboutPanel p {
  width: 170px;
  margin: 20px 0 0 0;
  padding: 0 0 0 24px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #f8d85e;
  line-height: 19px
}

#aboutPanel p a {
  color: #f8d85e;
  background: #9f3105;
  text-decoration: none
}

#aboutPanel p a:hover {
  background: #812a08
}

#aboutPanel .read {
  width: 62px;
  height: 23px;
  margin: 0px;
  padding: 0 0 0 131px;
  float: left
}

#aboutPanel .read a {
  width: 62px;
  height: 23px;
  margin: 0px;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 11px;
  color: #d9d9d9;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  background: url(2-breed-images/buttons.jpg) no-repeat
}

#aboutPanel .read a:hover {
  color: #cd4007
}

#eventPanel {
  width: 216px;
  height: 715px;
  margin: 0px;
  padding: 0px;
  float: left;
  border-left: #f3f1d2 solid 1px;
  background: #9fb31a url(2-breed-images/globalpic.jpg) no-repeat -294px
    -494px
}

#about {
  width: 47px;
  height: 110px;
  margin: 0px;
  padding: 0 0 0 169px;
  float: left
}

#about a {
  width: 47px;
  height: 36px;
  margin: 0px;
  padding: 56px 0 0 0;
  float: left;
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
  color: #646464;
  line-height: 13px;
  text-align: center;
  text-decoration: none;
  background: url(2-breed-images/about.gif) no-repeat
}

#about a:hover {
  height: 36px;
  padding: 74px 0 0 0;
  background: url(2-breed-images/about.gif) no-repeat -48px 0
}

#eventPanel h2 {
  width: 170px;
  margin: 199px 0 0 0;
  padding: 0 0 0 24px;
  float: left;
  font-family: Arial;
  font-size: 26px;
  color: #FFFFFF;
  line-height: 30px;
  font-weight: normal
}

#eventPanel h3 {
  width: 170px;
  margin: 8px 0 0 0;
  padding: 0 0 0 24px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #ffe996;
  line-height: 19px;
  font-weight: bold
}

#eventPanel ul {
  width: 170px;
  margin: 8px 0 0 0;
  padding: 0 0 0 24px;
  float: left;
  display: block
}

#eventPanel ul li {
  width: 170px;
  margin: 3px 0 0 0;
  padding: 0 0 14px 0;
  float: left;
  display: block
}

#eventPanel ul li h2 {
  width: 170px;
  margin: 0px;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #ffffff;
  line-height: 14px;
  font-weight: bold
}

#eventPanel ul li p {
  width: 170px;
  margin: 5px 0 0 0;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #f2ff9a;
  line-height: 19px
}

#eventPanel ul li p a {
  font-size: 12px;
  color: #f2ff9a;
  float: none;
  background: #75850e
}

#eventPanel ul li p a:hover {
  color: #f2ff9a;
  background: #525d08
}

#eventPanel ul li a {
  width: 62px;
  height: 23px;
  margin: 14px 0 0 0;
  padding: 0px;
  float: right;
  font-family: Arial;
  font-size: 11px;
  color: #d9d9d9;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  background: url(2-breed-images/buttons.jpg) no-repeat -62px 0
}

#eventPanel ul li a:hover {
  color: #9fb31a
}

#rightPanel {
  width: 400px;
  margin: 0px;
  padding: 0 0 0 20px;
  float: left
}

#menu {
  width: 191px;
  margin: 22px 0 0 0;
  padding: 0 34px 0 0;
  float: left
}

#menu ul {
  width: 191px;
  margin: 0px;
  padding: 0px;
  float: left;
  display: block
}

#menu ul li {
  width: 191px;
  margin: 0px;
  padding: 0px;
  float: left;
  display: block
}

#menu ul li a {
  width: 176px;
  height: 24px;
  margin: 0px;
  padding: 0 0 0 15px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #636038;
  line-height: 22px;
  font-weight: bold;
  text-decoration: none;
  border-bottom: #b1ae7e dotted 1px;
  background: url(2-breed-images/liststyle.jpg) no-repeat 0 7px
}

#menu ul li a:hover {
  color: #75850e
}

#menu ul li a.bottom {
  width: 176px;
  height: 24px;
  margin: 0px;
  padding: 0 0 0 15px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #636038;
  line-height: 22px;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 0px;
  background: url(2-breed-images/liststyle.jpg) no-repeat 0 7px
}

#menu ul li a.bottom:hover {
  color: #9fb31a
}

#addBlock {
  width: 171px;
  height: 195px;
  margin: 22px 0 0 0;
  padding: 0px;
  float: left;
  background: url(2-breed-images/globalpic.jpg) no-repeat -337px -110px
}

#rightPanel h2 {
  width: 343px;
  height: 44px;
  margin: 29px 0 0 0;
  padding: 0 0 0 57px;
  float: left;
  font-family: Arial;
  font-size: 34px;
  color: #cb3e07;
  line-height: 40px;
  font-weight: normal;
  background: url(2-breed-images/globalpic.jpg) no-repeat -467px -308px
}

#additionalLinks {
  width: 400px;
  margin: 0px;
  padding: 0px;
  float: left
}

#additionalLinks ul {
  width: 400px;
  margin: 12px 0 0 0;
  padding: 0px;
  float: left;
  display: block
}

#additionalLinks ul li {
  width: 400px;
  margin: 0px;
  padding: 0px;
  float: left;
  display: block
}

#additionalLinks ul li a {
  width: 371px;
  height: 27px;
  margin: 3px 0 0 0;
  padding: 0 0 0 27px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #3b3a2b;
  line-height: 25px;
  text-decoration: none;
  background: url(2-breed-images/globalpic.jpg) no-repeat -75px -83px
}

#additionalLinks ul li a:hover {
  color: #9fb31a
}

#iconLinks {
  width: 400px;
  height: 101px;
  margin: 25px 0 0 0;
  padding: 0px;
  float: left
}

#iconLinks .ideas {
  width: 78px;
  height: 51px;
  margin: 0px;
  padding: 50px 0 0 49px;
  float: left;
  font-family: Arial;
  font-size: 10px;
  color: #a8a8a8;
  line-height: 14px;
  text-decoration: none;
  background: url(2-breed-images/globalpic.jpg) no-repeat -77px -392px
}

#iconLinks .blank {
  width: 9px;
  height: 101px;
  margin: 0px;
  padding: 0px;
  float: left
}

#iconLinks .signup {
  width: 78px;
  height: 51px;
  margin: 0px;
  padding: 50px 0 0 49px;
  float: left;
  font-family: Arial;
  font-size: 10px;
  color: #a8a8a8;
  line-height: 14px;
  text-decoration: none;
  background: url(2-breed-images/globalpic.jpg) no-repeat -204px -392px
}

#iconLinks .blog {
  width: 78px;
  height: 51px;
  margin: 0px;
  padding: 50px 0 0 49px;
  float: left;
  font-family: Arial;
  font-size: 10px;
  color: #a8a8a8;
  line-height: 14px;
  text-decoration: none;
  background: url(2-breed-images/globalpic.jpg) no-repeat -331px -392px
}

#newsLetter {
  width: 284px;
  height: 71px;
  margin: 25px 0 0 0;
  padding: 10px 0 0 114px;
  float: left;
  background: url(2-breed-images/globalpic.jpg) no-repeat -75px 0
}

#newsLetter h3 {
  width: 284px;
  margin: 0px;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 18px;
  color: #212121;
  line-height: 22px
}

#newsLetter input {
  width: 206px;
  height: 18px;
  margin: 5px 0 0 0;
  padding: 3px 0 0 0;
  float: left;
  font-family: Arial;
  font-size: 10px;
  color: #212121;
  line-height: 14px
}

#newsLetter a {
  width: 41px;
  height: 23px;
  margin: 4px 0 0 0;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 11px;
  color: #FFFFFF;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
  background: url(2-breed-images/globalpic.jpg) no-repeat -75px -226px
}

#newsLetter .blank {
  width: 7px;
  height: 10px;
  margin: 0px;
  padding: 0px;
  float: left
}

#middleWrap {
  width: 100%;
  margin: 0px;
  padding: 0px;
  float: left;
  background: #e9e6c3 url(2-breed-images/middleBg.jpg) repeat-x
}

#middlePanel {
  width: 928px;
  margin: 0 auto;
  padding: 0px
}

#middlePanel .left {
  width: 473px;
  margin: 0px;
  padding: 0 31px 34px 26px;
  float: left
}

#middlePanel .left h2 {
  width: 423px;
  height: 38px;
  margin: 24px 0 0 0;
  padding: 0 0 0 50px;
  float: left;
  font-family: Arial;
  font-size: 34px;
  color: #1d1d1d;
  line-height: 38px;
  font-weight: normal;
  background: url(2-breed-images/globalpic.jpg) no-repeat -474px -357px
}

#middlePanel .left p {
  width: 470px;
  margin: 9px 0 0 0;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #575433;
  line-height: 19px
}

#middlePanel .left p span {
  font-weight: bold;
  color: #8da00d
}

#middlePanel .left a {
  width: 62px;
  height: 23px;
  margin: 7px 0 0 0;
  padding: 0px;
  float: right;
  font-family: Arial;
  font-size: 11px;
  color: #FFFFFF;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
  background: url(2-breed-images/globalpic.jpg) no-repeat -117px -226px
}

#loginPanel {
  width: 202px;
  height: 184px;
  margin: 19px 0 0 0;
  padding: 0px;
  float: left;
  border: #d7d3aa solid 1px;
  background: #f1eed0
}

#loginPanel h2 {
  width: 169px;
  height: 34px;
  margin: 0px;
  padding: 0 0 0 33px;
  float: left;
  font-family: Arial;
  font-size: 18px;
  color: #212121;
  line-height: 30px;
  font-weight: normal;
  background: #ffffff url(2-breed-images/globalpic.jpg) no-repeat -483px
    -399px
}

#loginPanel h3 {
  width: 168px;
  margin: 8px 0 0 0;
  padding: 0 17px 0 17px;
  float: left;
  font-family: Arial;
  font-size: 10px;
  color: #1d1d1d;
  line-height: 14px;
  font-weight: normal
}

#loginPanel input {
  width: 167px;
  height: 18px;
  margin: 3px 0 0 0;
  padding: 3px 0 0 0;
  float: left;
  font-family: Arial;
  font-size: 10px;
  color: #212121;
  line-height: 14px
}

#loginPanel .blank {
  width: 17px;
  height: 10px;
  margin: 0px;
  padding: 0px;
  float: left
}

#loginPanel p {
  width: 127px;
  margin: 9px 0 0 0;
  padding: 0 0 0 17px;
  float: left
}

#loginPanel p a {
  font-family: Arial;
  font-size: 12px;
  color: #9fb31a;
  font-weight: bold;
  line-height: 16px;
  text-decoration: none;
}

#loginPanel .login {
  width: 41px;
  height: 23px;
  margin: 6px 0 0 0;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 11px;
  color: #FFFFFF;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  background: url(2-breed-images/globalpic.jpg) no-repeat -180px -226px
}

#contact {
  width: 175px;
  height: 107px;
  margin: 21px 0 0 0;
  padding: 0px;
  float: left;
  background: url(2-breed-images/globalpic.jpg) no-repeat -75px -111px
}

#contact p {
  font-family: "Arial Narrow";
  font-size: 26px;
  color: #252525;
  line-height: 30px;
  margin: 10px 0 0 0;
  padding: 0 0 0 28px
}

#gap {
  width: 19px;
  height: 10px;
  margin: 0px;
  padding: 0px;
  float: left
}

#footWrap {
  width: 100%;
  margin: 0px;
  padding: 0 0 23px 0;
  float: left;
  background: url(2-breed-images/footbg.jpg) repeat-x
}

#footPanel {
  width: 928px;
  margin: 0 auto;
  padding: 0px
}

#footNav {
  width: 928px;
  margin: 25px 0 0 0;
  padding: 0px;
  float: left
}

#footNav ul {
  width: 655px;
  margin: 0 auto;
  padding: 0px;
  display: block
}

#footNav ul li {
  width: auto;
  margin: 0px;
  padding: 0px;
  float: left;
  display: block
}

#footNav ul li .blank {
  width: auto;
  margin: 3px 0 0 0;
  padding: 0 7px 0 7px;
  float: left;
  font-family: Arial;
  font-size: 11px;
  color: #d5d5d5;
  line-height: 15px
}

#footNav ul li a {
  font-family: Arial;
  font-size: 11px;
  color: #d5d5d5;
  line-height: 15px;
  text-decoration: none;
  margin: 0px;
  padding: 0px
}

#copyright {
  width: 928px;
  margin: 3px 0 0 0;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 10px;
  color: #9fb31a;
  line-height: 14px;
  text-align: center
}

#validation {
  width: 928px;
  margin: 11px 0 0 0;
  padding: 0px;
  float: left
}

#validation ul {
  width: 132px;
  margin: 0 auto;
  padding: 0px;
  display: block
}

#validation ul li {
  width: auto;
  margin: 0px;
  padding: 0px;
  float: left;
  display: block
}

#validation ul li .blank {
  width: 7px;
  height: 10px;
  margin: 0px;
  padding: 0px;
  float: left
}

#validation ul li a {
  width: 62px;
  height: 23px;
  font-family: Arial;
  font-size: 11px;
  color: #FFFFFF;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
  float: left;
  display: block;
  background: url(2-breed-images/globalpic.jpg) no-repeat -222px -226px
}

#footPanel p {
  width: 928px;
  margin: 7px 0 0 0;
  padding: 0px;
  float: left;
  font-family: Arial;
  font-size: 12px;
  color: #e9e6c3;
  line-height: 16px;
  font-weight: bold;
  text-align: center
}

#footPanel p a {
  color: #FFF;
  background: #252525;
  text-decoration: none
}
</style>


<link rel="icon" href="2-breed-images/icon.ico" />
</head>
<body>
<div id="topContentWrap">
  <div id="topContent">
    <div id="logoPanel">
      <h1>Make a Different Way of Your Future 2breed</h1>
    </div>
    <div id="aboutPanel">
      <div id="home"><a href="http://www.free-css.com/">Main Page</a></div>
      <h2>Who We Are</h2>
      <h3>arcu purus tempus ipsum,ut malesuada </h3>
      <p>risus augue nec justo. Sed et massa. Ut a quam. Morbi rhoncus justo. Nunc pellentesque nunc a justo. Aliquam ligula elit, <a href="http://www.free-css.com/">commodo</a> nec, dictum ut, tristique eu, magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus cursus</p>
      <div class="read"><a href="http://www.free-css.com/">read more</a></div>
    </div>
    <div id="eventPanel">
      <div id="about"><a href="http://www.free-css.com/">About Us</a></div>
      <h2>Latest Events</h2>
      <h3>arcu purus tempus ipsum,ut malesuada </h3>
      <ul>
        <li>
          <h2>On 12th February 2008</h2>
          <p>Risus augue nec justo. Sed et massa. <a href="http://www.free-css.com/">Ut a quam.</a> Morbi rhoncus justo. Nunc </p>
          <a href="http://www.free-css.com/">read more</a> </li>
        <li>
          <h2>On 12th February 2008</h2>
          <p>Risus augue nec justo. Sed et massa. Ut a quam. Morbi rhoncus justo. Nunc </p>
          <a href="http://www.free-css.com/">read more</a> </li>
      </ul>
    </div>
    <div id="rightPanel">
      <div id="menu">
        <ul>
          <li><a href="http://www.free-css.com/">Client Testimonials</a></li>
          <li><a href="http://www.free-css.com/">Latest Events</a></li>
          <li><a href="http://www.free-css.com/">Our Online Support</a></li>
          <li><a href="http://www.free-css.com/">Solutions</a></li>
          <li><a href="http://www.free-css.com/">Forum</a></li>
          <li><a href="http://www.free-css.com/">What Our Future Plans</a></li>
          <li><a href="http://www.free-css.com/">Projects</a></li>
          <li><a href="http://www.free-css.com/" class="bottom">Contact Us</a></li>
        </ul>
      </div>
      <div id="addBlock"></div>
      <h2>Sociis natoque penati</h2>
      <div id="additionalLinks">
        <ul>
          <li><a href="http://www.free-css.com/">Duis vitae sem sed faucibus tortor ac turpis maecenas dbus</a></li>
          <li><a href="http://www.free-css.com/">Sapien nec nisi phasellus eget nulla id ipsum temfacilisis</a></li>
          <li><a href="http://www.free-css.com/">Sociis natoque penatibus et magnis</a></li>
          <li><a href="http://www.free-css.com/">Dis parturient montes nascetur ridiculus musquam nullam</a></li>
          <li><a href="http://www.free-css.com/">Sagittis turpis eu facilisis</a></li>
          <li><a href="http://www.free-css.com/">Accumsan nunc nibh hendrerit dolor, sit amet tinc</a></li>
        </ul>
      </div>
      <div id="iconLinks"> <a href="http://www.free-css.com/" class="ideas">liberot dictum </a>
        <div class="blank"></div>
        <a href="http://www.free-css.com/" class="signup">liberot dictum </a>
        <div class="blank"></div>
        <a href="http://www.free-css.com/" class="blog">liberot dictum </a> </div>
      <div id="newsLetter">
        <h3>Newsletter Signup</h3>
        <input name="news" type="text" value="- Enter Your Email ID -" onfocus="if(this.value=='- Enter Your Email ID -')this.value=''" onblur="if(this.value=='')this.value='- Enter Your Email ID -'"/>
        <div class="blank"></div>
        <a href="http://www.free-css.com/">Submit</a> </div>
    </div>
  </div>
</div>
<div id="middleWrap">
  <div id="middlePanel">
    <div class="left">
      <h2>Features</h2>
      <p><span>Cras sagittis, sapien et aliquam cursus,</span> diam enim varius pede, ut rutrum justo ante in ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</p>
      <p><span>Etiam urna felis, varius egestas,</span> consequat nec, dictum in, tortor. Nam vel dolor vel nisi ultrices dictum. Sed convallis, lorem ac lacinia pretium</p>
      <a href="http://www.free-css.com/">read more</a> </div>
    <div id="loginPanel">
      <h2>Member Login</h2>
      <h3>- Enter Your Name -</h3>
      <div class="blank"></div>
      <input name="nane" type="text" />
      <h3>- Enter Your Password -</h3>
      <div class="blank"></div>
      <input name="nane" type="text" />
      <p><a href="http://www.free-css.com/">Forgot Password ?</a></p>
      <a href="http://www.free-css.com/" class="login">Login</a> </div>
    <div id="gap"></div>
    <div id="contact">
      <p>+01-3345-4456</p>
    </div>
  </div>
</div>
<div id="footWrap">
  <div id="footPanel">
    <div id="footNav">
      <ul>
        <li><a href="http://www.free-css.com/">Client Testimonials</a></li>
        <li>
          <div class="blank">|</div>
        </li>
        <li><a href="http://www.free-css.com/">Latest Events</a></li>
        <li>
          <div class="blank">|</div>
        </li>
        <li><a href="http://www.free-css.com/">Our Online Support</a></li>
        <li>
          <div class="blank">|</div>
        </li>
        <li><a href="http://www.free-css.com/">Solutions</a></li>
        <li>
          <div class="blank">|</div>
        </li>
        <li><a href="http://www.free-css.com/">Forum</a></li>
        <li>
          <div class="blank">|</div>
        </li>
        <li><a href="http://www.free-css.com/">What Our Future Plans</a></li>
        <li>
          <div class="blank">|</div>
        </li>
        <li><a href="http://www.free-css.com/">Projects</a></li>
        <li>
          <div class="blank">|</div>
        </li>
        <li><a href="http://www.free-css.com/">Contact Us</a></li>
      </ul>
    </div>
    <div id="copyright">&copy; Copyright Information Goes Here. All Rights Reserved.</div>
    <p>Designed By: <a href="http://www.templateworld.com/">TemplateWorld</a> and brought to you by <a href="http://www.smashingmagazine.com">SmashingMagazine</a></p>
    <div id="validation">
      <ul>
        <li><a href="http://validator.w3.org/check?uri=referer">xhtml valid</a></li>
        <li>
          <div class="blank"></div>
        </li>
        <li><a href="http://jigsaw.w3.org/css-validator/check/referer">css valid</a></li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>








Related examples in the same category

1.Footer with copyright notice
2.Shading footer with background image
3.Footer with Div
4.Footer with UL
5.Footer 2
6.Footer with background
7.Footer with DIV and UL
8.position: absolute; for Footer
9.Centered footer
10.Top border for Footer
11.Header, footer, navigation bar, and body
12.Without a footer
13.Footer with solid line
14.clear: both; for the footer
15.Footer with background 2
16.Footer DIV position: absolute;
17.Footer with green background
18.Grey link color for footer
19.Two Line footer
20.Grey footer
21.Footer with dark background
22.Four-column footer
23.Footer: clear both
24.Large footer with three columns
25.About me column in the footer
26.Footer with smaller font
27.Footer with Two parts
28.Contact information in the footer
29.Multi-line footer
30.using vertical line to separate footer
31.Three column layout with header and footer