1

I was wondering how I can get my footer to stay at the bottom. Sorry I am still new to this and still learning. If you guys see anything in my code I could do better on just let me know. I was messing around with the positioning a lot. I think the next website I design I will be using flexbox lol. If anyone has any suggestions or some tips for me to do better please let me know. I tried making the body relative and made the footer absolute with bottom set to 0 but that didn't work

@font-face{
    font-family: 'HeadingFont';
    src: url(../fonts/KaushanScript-Regular.otf);
    font-style: normal;
}

body{
    font: 15px/1.5 Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    background: #ffffff;
    box-sizing: border-box;
}
/* global */
.container{
    width: 100%;
    margin:  5px 0 15px 0;
    overflow-x: hidden;
}

#wrapper{
    padding: 60px 155px ;
    
}


ul{
    text-align: left;
    list-style-type: square;
}

.button_1{
    height: 38px;
    background: #e8491d;
    border: 0;
    padding-left: 20px;
    padding-right: 20px;
    color: #ffffff;
}

/* header */
header{
background: #35424a;
color: #ffffff;
padding: 30px 10px 0 20px;
min-height: 70px;
border-bottom: #eB491d 3px solid; 
}


header #branding{
    float: left;
    font-family: 'HeadingFont' , 'Times New Roman', Times, serif;
    font-size: 0.9rem;
}
header #branding h1{
    margin: 0;
}
.navbar a{
    color: white;
    padding-right: 20px;
}

.navbar{
    padding-right: 20px;
}
.side-nav{
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    right: 0;
    background: #35424a;
    opacity: 0.9;
    overflow-x: hidden;
    padding-top: 70px;
    transition: 0.5s;
}

.side-nav a{
    padding: 20px 30px 20px 10px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
    color: #ffffff;
    display: block;
    transition: 0.3s;

}

.side-nav .btn-close{
    position: absolute;
    top: 20px;
    left: -50px;
    font-size: 36px;
    margin-left: 50px;
    padding: 10px;
}

.fas{
    float: right;
    font-size: 30px;

}

header .highlight, header .current a{
    color: #e8491d;
    font-weight: bold;
}

header a:hover{
    color: #cccccc;
    transition: all 0.3s ease;
    font-weight: bold;
}

/*Slider*/
.slider-inner{
    width: 90%;
 height:400px;
 position:relative;
 overflow:hidden;
 float:left;
 padding:3px;

}

.slider-inner img{
 display:none;
 width:100%;
 height:500px;
}

.slider-inner img.active{
 display:inline-block;
}

.prev,.next{
 float:left;
 margin-top:130px;
 cursor: pointer;
}

.prev{
 position:relative;
 margin-right:-45px;
 z-index:100;
}

.next{
 position:relative;
 margin-left:-45px;
 z-index:100;
}

/*Homepage packages*/

#boxes{
    margin-top: 20px;
    
}

#boxes .box{
    float: left;
    text-align: center;
    width: 30%;
    padding: 10px;

}


#boxes .bronze{
    color: #cd7f32; /*Bronze*/
    text-align: center;
}

#boxes .silver{
    color: #C0C0C0; /*silver*/
}

#boxes .gold{
    color: #CFB53B; /*Gold*/
}

/*Gallery Page*/

    #gallery{
        max-width: 90%;
        padding: 50px;
    }

    .image{
        border-radius: 5px;
        width: 70%;
        background: #35424a;
        margin: 0 auto;
        padding: 50px;
    }

    .image img{
        width: 200px;
        padding: 10px;

    }

    .image img:hover{
        transform: scale(1.2);
    }




/*Contact Page*/


form {
    border-radius: 5px;
    background: #35424a;
    color: white;
    width:70%;
    padding: 50px;
    margin: 0 auto;
  }

  #contact{
      width: 90%;
  }

  input[type=text], [type=email], select, textarea{
 width: 100%;
    padding: 12px;
 border: 1px solid #ccc;
 border-radius: 4px;
 box-sizing: border-box;
 resize: vertical;
  }
  
  input[type=submit] {
 background-color: #4CAF50;
 color: white;
 padding: 12px 30px;
 border: none;
 border-radius: 4px;
 cursor: pointer;
    float: right;
    width: 100px;
  }

  .submit:hover{
    color: black;
    background: rgb(60, 255, 0);
    transition: all 0.9s ease;
  }

  label {
 padding: 12px 12px 12px 0;
 display: inline-block;
  }

#contact{
    padding: 50px;
    line-height: 3em;
    
}


/*footer*/

footer{
    width: 100%;
    height: 30px;
    padding: 10px;
    color: white;
    background-color: #e8491d;
    text-align: center;
}

/*Media Queries*/

@media only screen and (max-width: 940px){

    #wrapper{
        padding: 0;
        margin: 0;
    }

    #boxes .box{
        float: left;
        text-align: center;
        width: 100%;
        padding: 5px;
    
    }

    header{
        padding: 10px;
    }

    header nav{
        margin: 0;
        float: left;
        }

        .image{
            width: 450px;
            margin: 0 auto;
        
        }

        #gallery{
            width: 100%;
        }

        #contact{
            padding-left: 10px;
            width: 100%;
        }

}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width-device-width">
        <title>photagraphy - Welcome</title>
        <link rel="stylesheet" href="./css/style.css">
        <script
        src="https://code.jquery.com/jquery-3.1.1.js"
        integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
        crossorigin="anonymous"></script>
        <script src="jqslider/js/main.js"></script>
        <script src="https://kit.fontawesome.com/01fc06f1b4.js" crossorigin="anonymous"></script>
        <script src="navigation.js"></script>
    </head>
    <body>
        <header>
            <div class="container">
                <div id="branding">
                    <h1> <span class="highlight">Jamie's</span> photagraphy</h1>
                </div>

                <nav class="navbar">
                    <span class="open-slide">
                        <a href="#" onclick="openSlideMenu()">
                            <i class="fas fa-bars"></i>
                        </a>
                    </span>
                </nav>
                <div id="side-menu" class="side-nav">
                    <a href="#" class="btn-close" onclick="closeSlideMenu()">&times;</a>
                    <a href="index.html">Home</a>
                    <a href="gallery.html">Gallery</a>
                    <a href="contact.html">Contact Us</a>
                </div>
            </div>
        </header>

        <div id="wrapper">
            <div class="container">
                <div class="slider-outer">
                    <img src="jqslider/images/arrow-left.png" class="prev" alt="Prev">
                    <div class="slider-inner">
                        <img src="jqslider/images/image1.jpg" class="active">
                        <img src="jqslider/images/image2.jpg">
                        <img src="jqslider/images/image3.jpg">
                        <img src="jqslider/images/image4.jpg">
                    </div>
                    <img src="jqslider/images/arrow-right.png" class="next" alt="Next">
                </div>
            </div>
            <section id="boxes">
                <div class="container">
                    <div class="box">
                        <h3 class="bronze">Bronze</h3>
                        <ul>
                            <li>Full Day coverage of your wedding.</li>
                            <li>Unlimited Photographers time on Wedding day.</li>
                            <li>Includes 2 hour Engagement session or subtract $200 if not needed.  Includes 25 Digital Photos, two 8x10s and three 5x7s.</li>
                            <li>1 hour Bridal Portrait session with 1 16x20 Canvas and 8x8 photo book with 10 sides or subtract $200 if not needed.</li>
                            <li> Video of photos from Engagement session and Bridal Session to use on your wedding day.</li>
                        </ul>
                    </div>

                    <div class="box">
                        <h3 class="silver">Silver</h3>
                        <ul>
                            <li>
                                Up to 8 hours photography for pre-wedding, wedding, and reception photographs.
                            </li>
                            <li>
                                Includes 1 hour Engagement session with 1 16x20 print and 2 8x10 prints.  (Subtract $100 if not needed)
                            </li>
                            <li>
                                1 hour Bridal Portrait session with 1 16x20 and 2 8x10 custom prints.  (Subtract $100 if not needed)
                            </li>
                            <li>
                                OPTION -  Engagement Session and Bridal Session or COPY OF 200 DIGITAL PHOTOS of your choice.
                            </li>
                            <li>
                                Online proofs.
                            </li>
                        </ul>
                    </div>

                    <div class="box">
                        <h3 class="gold">Gold</h3>
                        <ul>
                            <li>Up to 6 Hours of photography for pre-wedding, wedding, and reception photographs.  (ask about additional time)</li>
                            <li>Online proofs.</li>
                            <li>Two photographers</li>
                            <li>One 16x20 Print!</li>
                            <li>Four 8x10s, Eight 5x7s, 10 4x6s</li>
                            <li>Custom Hard Cover Photo Book.</li>
                            <li>15 full format images of your choice, copyright free.</li>
                        </ul>
                    </div>

                </div>
        </section>
        </div>
        
        <footer>
            <p>Created by Justin Hamilton. Copyright &copy; 2019</p>
        </footer>
    </body>
</html>
Hank Phung
  • 2,059
  • 1
  • 23
  • 38
Justin Hamilton
  • 11
  • 1

4 Answers4

0

Making your footer position: fixed will help you achieve this. You may have to watch out for other elements near the bottom colliding and overlapping. You can use margins to help with that. Also, using a high z-index will prevent other elements from being displayed over top of it.

You can read more about fixed positioning here. 

@font-face {
  font-family: 'HeadingFont';
  src: url(../fonts/KaushanScript-Regular.otf);
  font-style: normal;
}

body {
  font: 15px/1.5 Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background: #ffffff;
  box-sizing: border-box;
}


/* global */

.container {
  width: 100%;
  margin: 5px 0 15px 0;
  overflow-x: hidden;
}

#wrapper {
  padding: 60px 155px;
}

ul {
  text-align: left;
  list-style-type: square;
}

.button_1 {
  height: 38px;
  background: #e8491d;
  border: 0;
  padding-left: 20px;
  padding-right: 20px;
  color: #ffffff;
}


/* header */

header {
  background: #35424a;
  color: #ffffff;
  padding: 30px 10px 0 20px;
  min-height: 70px;
  border-bottom: #eB491d 3px solid;
}

header #branding {
  float: left;
  font-family: 'HeadingFont', 'Times New Roman', Times, serif;
  font-size: 0.9rem;
}

header #branding h1 {
  margin: 0;
}

.navbar a {
  color: white;
  padding-right: 20px;
}

.navbar {
  padding-right: 20px;
}

.side-nav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  right: 0;
  background: #35424a;
  opacity: 0.9;
  overflow-x: hidden;
  padding-top: 70px;
  transition: 0.5s;
}

.side-nav a {
  padding: 20px 30px 20px 10px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
  color: #ffffff;
  display: block;
  transition: 0.3s;
}

.side-nav .btn-close {
  position: absolute;
  top: 20px;
  left: -50px;
  font-size: 36px;
  margin-left: 50px;
  padding: 10px;
}

.fas {
  float: right;
  font-size: 30px;
}

header .highlight,
header .current a {
  color: #e8491d;
  font-weight: bold;
}

header a:hover {
  color: #cccccc;
  transition: all 0.3s ease;
  font-weight: bold;
}


/*Slider*/

.slider-inner {
  width: 90%;
  height: 400px;
  position: relative;
  overflow: hidden;
  float: left;
  padding: 3px;
}

.slider-inner img {
  display: none;
  width: 100%;
  height: 500px;
}

.slider-inner img.active {
  display: inline-block;
}

.prev,
.next {
  float: left;
  margin-top: 130px;
  cursor: pointer;
}

.prev {
  position: relative;
  margin-right: -45px;
  z-index: 100;
}

.next {
  position: relative;
  margin-left: -45px;
  z-index: 100;
}


/*Homepage packages*/

#boxes {
  margin-top: 20px;
}

#boxes .box {
  float: left;
  text-align: center;
  width: 30%;
  padding: 10px;
}

#boxes .bronze {
  color: #cd7f32;
  /*Bronze*/
  text-align: center;
}

#boxes .silver {
  color: #C0C0C0;
  /*silver*/
}

#boxes .gold {
  color: #CFB53B;
  /*Gold*/
}


/*Gallery Page*/

#gallery {
  max-width: 90%;
  padding: 50px;
}

.image {
  border-radius: 5px;
  width: 70%;
  background: #35424a;
  margin: 0 auto;
  padding: 50px;
}

.image img {
  width: 200px;
  padding: 10px;
}

.image img:hover {
  transform: scale(1.2);
}


/*Contact Page*/

form {
  border-radius: 5px;
  background: #35424a;
  color: white;
  width: 70%;
  padding: 50px;
  margin: 0 auto;
}

#contact {
  width: 90%;
}

input[type=text],
[type=email],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 30px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
  width: 100px;
}

.submit:hover {
  color: black;
  background: rgb(60, 255, 0);
  transition: all 0.9s ease;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

#contact {
  padding: 50px;
  line-height: 3em;
}


/*footer*/

footer {
  width: 100%;
  height: 30px;
  padding: 10px;
  color: white;
  background-color: #e8491d;
  text-align: center;
  position: fixed;
  bottom: 0;
}


/*Media Queries*/

@media only screen and (max-width: 940px) {
  #wrapper {
    padding: 0;
    margin: 0;
  }
  #boxes .box {
    float: left;
    text-align: center;
    width: 100%;
    padding: 5px;
  }
  header {
    padding: 10px;
  }
  header nav {
    margin: 0;
    float: left;
  }
  .image {
    width: 450px;
    margin: 0 auto;
  }
  #gallery {
    width: 100%;
  }
  #contact {
    padding-left: 10px;
    width: 100%;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width-device-width">
  <title>photagraphy - Welcome</title>
  <link rel="stylesheet" href="./css/style.css">
  <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
  <script src="jqslider/js/main.js"></script>
  <script src="https://kit.fontawesome.com/01fc06f1b4.js" crossorigin="anonymous"></script>
  <script src="navigation.js"></script>
</head>

<body>
  <header>
    <div class="container">
      <div id="branding">
        <h1> <span class="highlight">Jamie's</span> photagraphy</h1>
      </div>

      <nav class="navbar">
        <span class="open-slide">
                        <a href="#" onclick="openSlideMenu()">
                            <i class="fas fa-bars"></i>
                        </a>
                    </span>
      </nav>
      <div id="side-menu" class="side-nav">
        <a href="#" class="btn-close" onclick="closeSlideMenu()">&times;</a>
        <a href="index.html">Home</a>
        <a href="gallery.html">Gallery</a>
        <a href="contact.html">Contact Us</a>
      </div>
    </div>
  </header>

  <div id="wrapper">
    <div class="container">
      <div class="slider-outer">
        <img src="jqslider/images/arrow-left.png" class="prev" alt="Prev">
        <div class="slider-inner">
          <img src="jqslider/images/image1.jpg" class="active">
          <img src="jqslider/images/image2.jpg">
          <img src="jqslider/images/image3.jpg">
          <img src="jqslider/images/image4.jpg">
        </div>
        <img src="jqslider/images/arrow-right.png" class="next" alt="Next">
      </div>
    </div>
    <section id="boxes">
      <div class="container">
        <div class="box">
          <h3 class="bronze">Bronze</h3>
          <ul>
            <li>Full Day coverage of your wedding.</li>
            <li>Unlimited Photographers time on Wedding day.</li>
            <li>Includes 2 hour Engagement session or subtract $200 if not needed. Includes 25 Digital Photos, two 8x10s and three 5x7s.</li>
            <li>1 hour Bridal Portrait session with 1 16x20 Canvas and 8x8 photo book with 10 sides or subtract $200 if not needed.</li>
            <li> Video of photos from Engagement session and Bridal Session to use on your wedding day.</li>
          </ul>
        </div>

        <div class="box">
          <h3 class="silver">Silver</h3>
          <ul>
            <li>
              Up to 8 hours photography for pre-wedding, wedding, and reception photographs.
            </li>
            <li>
              Includes 1 hour Engagement session with 1 16x20 print and 2 8x10 prints. (Subtract $100 if not needed)
            </li>
            <li>
              1 hour Bridal Portrait session with 1 16x20 and 2 8x10 custom prints. (Subtract $100 if not needed)
            </li>
            <li>
              OPTION - Engagement Session and Bridal Session or COPY OF 200 DIGITAL PHOTOS of your choice.
            </li>
            <li>
              Online proofs.
            </li>
          </ul>
        </div>

        <div class="box">
          <h3 class="gold">Gold</h3>
          <ul>
            <li>Up to 6 Hours of photography for pre-wedding, wedding, and reception photographs. (ask about additional time)</li>
            <li>Online proofs.</li>
            <li>Two photographers</li>
            <li>One 16x20 Print!</li>
            <li>Four 8x10s, Eight 5x7s, 10 4x6s</li>
            <li>Custom Hard Cover Photo Book.</li>
            <li>15 full format images of your choice, copyright free.</li>
          </ul>
        </div>

      </div>
    </section>
  </div>

  <footer>
    <p>Created by Justin Hamilton. Copyright &copy; 2019</p>
  </footer>
</body>

</html>
alexwc_
  • 1,595
  • 2
  • 24
  • 35
0

I Use:

.footer{
    width: 100%;
    height: 4rem;
    bottom: 0;
    left: 0;
    position: absolute;
}

Your Css had:

footer{
    width: 100%;
    height: 30px;
    padding: 10px;
    color: white;
    background-color: #e8491d;
    text-align: center;
}
Benjamin James
  • 43
  • 5
0

You can make your footer fixed

make sure you add z-index value so that other element don't overlaps the footer.

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 5;
}
Nipun Ravisara
  • 3,629
  • 3
  • 20
  • 35
0
#container {
  position: relative;
  min-height: 100vh;
}
#content {
  padding-bottom: 2.5rem;    /* Footer height */
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}


<!DOCTYPE html>
<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>
<body>
 <div id="container">
   <div id="content">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>
</html>
Shashidhar Reddy
  • 187
  • 1
  • 6