Geek Answers Handbook

Footer that moves with content

as the name suggests that I have a footer that I want to move with my content. Basically, I have text that when the browser is pushed to a smaller width, the content goes under the footer when I want the footer to move more quickly with the content. Make it not just stay in position.

I went through most of my code and deleted the positioning, which is not necessary, but if I try to make it lower 0 on .footerwrap, it will randomly move on the page. Hope you guys can help.

I will link both my html and CSS so that you can get an idea. Unfortunately, the site is offline, but this is probably a simple solution.

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Home</title> <!--===================================================css links===================================================!--> <link href='http://fonts.googleapis.com/css?family=Raleway:600,500,400,200' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Roboto:400,700,900,100,300' rel='stylesheet' type='text/css'> <link href="css/default_style.css" rel="stylesheet" type="text/css" /> </head> <body> <!--===================================================Header===================================================!--> <div class="wrapper"> <div class="headerwrap"> <div class="social"> <a href="www.facebook.com"><img class="move" src="images/deviant.png"></a> <a href="www.facebook.com"><img class="move" src="images/yt.png"/></a> <a href="www.facebook.com"><img class="move" src="images/fb.png"/></a> </div><!--close social!--> <div class="header"> <div class="logo"> <img src="images/logo.png" /> </div><!--close logo--> </div><!--close header!--> <div class="menu"> <ul class="menutxt"> <li><a href="index.html">HOME</a></li> <li><a href="about.html">PORTFOLIO</a></li> <li><a href="manga.html">CONTACT</a></li> </ul> </div><!--close menu!--> </div><!--close headerwrap!--> <!--===================================================Fader===================================================!--> <div class="fadewrapper"> <div class="fader"> <img class="bottom" src="images/dsas.png"/> <img class="top" src="images/dsa.png"/> </div> </div> <!--===================================================Content===================================================!--> <div class="contentwrap"> <div class="textwrap"> <div class="contentspace"> </div><!--close contentspace!--> <div class="content"> <p>Specializations</p> <p>With various skills in branding, multi-media and advertising I am able to provide fresh and inspiring solutions for the task given to me. Using various programs such as:</p> </div><!--close content!--> <div class="divider"> <img src="images/divide.png"/> </div><!--close divider!--> <div class="content2"> <p>Why me?</p> <p>The work I create is reflecting something fresh and exciting in order to meet the clients needs. About pushing for new and innovative ideas and pushing for an end result of brand and product growth</p> </div><!--close content2!--> <div class="contentspace"> </div><!--close contentspace!--> </div><!--close textwrap!--> </div><!--close contentwrap!--> <!--===================================================Footer===================================================!--> <div class="footerwrap"> <p class="foottxt">Designed and developed by Luke Babich- All Rights Reserved ©2015</p> </div><!--close footerwrap!--> </div><!--close wrapper!--> </body> </html> 
 @charset "utf-8"; /*---------------------------- Body and Default ----------------------------*/ body { background:#171717; margin:0; font-family: 'Roboto', sans-serif; color:#CCC; } a{ color:#000; transition:300ms; } a:hover { color:#000; } a:link { text-decoration: none; } /*---------------------------- Main Wrapper ----------------------------*/ .wrapper{ margin: 0 auto; width:100%; height:auto; } /*---------------------------- Header ----------------------------*/ .headerwrap{ position:relative; background:#171717; -moz-box-shadow: 0px 10px 20px 0px #333 ; -webkit-box-shadow: 0px 10px 20px 0px #333 ; box-shadow: 0px 10px 20px 0px #000; z-index:200; } .header{ position:relative; right:120px; min-height:180px; height: 100%; padding: 0; margin: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; } .logo{ position: absolute; min-width:60px; top:4%; } .logo img{ display: block; margin-left: auto; margin-right: auto; width:100%; } .social{ position: absolute; width:100%; min-width:20px; top:15px; right:1%; z-index:500; } .social img{ float:right; width:35px; display: block; padding:0 0 0px 15px; } img.move { bottom:0px; transition: transform 0.4s cubic-bezier(0.2, 1, 0.44, 1.2); } img.move:hover { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.4, 1.4, 1.4); } /*---------------------------- Menu ----------------------------*/ .menu{ position:absolute; width:100%; top:200px; z-index:401; } ul { margin: 0 auto; padding:0 0 5px 0; list-style-type: none; } li{ display: inline; list-style:none; padding:1%; transition: all 300ms; } li a{ color:#CCC; transition:300ms; } li a:hover { color:#900; } .menutxt{ text-align: center; font-family: 'Raleway', sans-serif; font-size:1.8vw; font-weight:400; z-index:300; } /*---------------------------- Image Fader ----------------------------*/ .fader { width:100%; z-index:1; } .fader img { position:absolute; width:100%; height:500px; max-height:1000px; min-height:200px; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } @keyframes faderFadeInOut { 0% { opacity:1; } 45% { opacity:1; } 55% { opacity:0; } 100% { opacity:0; } } .fader img.top { animation-name: faderFadeInOut; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 4s; animation-direction: alternate;*/ } /*---------------------------- Content ----------------------------*/ .contentwrap{ position:relative; top:500px; width:100%; z-index:500; background:#171717; height:290px; min-height:212px; -moz-box-shadow: 0px -10px 20px 0px #000; -webkit-box-shadow: 0px -10px 20px 0px #000; box-shadow: 0px -10px 10px 0px #000; } .textwrap{ position:relative; width:100%; top:40px; height:190px; } .content, .divider, .content2 { text-align:center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .divider{ height:200px; width: 24%; display:inline-block; float: left; margin: 0 1% 1% 0; } .divider img{ display: block; margin-left: auto; margin-right: auto; } .content, .content2 { height:200px; width: 15%; display:inline-block; float: left; margin: 0 1% 1% 0; } .contentspace{ width: 20%; display:inline-block; float: left; margin: 0 1% 1% 0; } /*---------------------------- Footer ----------------------------*/ .footerwrap{ position:relative; top:460px; width:100%; z-index:501; clear:both; } .foottxt{ width:100%; height:26px; text-align: center; background:#333; font-family: 'Roboto', sans-serif; padding-top:15px; font-size:0.5vw; color:#FFFFFF; font-weight:200; }

+5
source share
3 answers

Besides using position: absolute and position: relative, some elements had a fixed height and could not grow with the content, and .textwrap needed a clearfix.

 @charset "utf-8"; /*---------------------------- Body and Default ----------------------------*/ body { background:#171717; margin:0; font-family: 'Roboto', sans-serif; color:#CCC; } a{ color:#000; transition:300ms; } a:hover { color:#000; } a:link { text-decoration: none; } /*---------------------------- Main Wrapper ----------------------------*/ .wrapper{ margin: 0 auto; width:100%; height:auto; } /*---------------------------- Header ----------------------------*/ .headerwrap{ position:relative; background:#171717; -moz-box-shadow: 0px 10px 20px 0px #333 ; -webkit-box-shadow: 0px 10px 20px 0px #333 ; box-shadow: 0px 10px 20px 0px #000; z-index:200; } .header{ position:relative; right:120px; min-height:180px; height: 100%; padding: 0; margin: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; } .logo{ position: absolute; min-width:60px; top:4%; } .logo img{ display: block; margin-left: auto; margin-right: auto; width:100%; } .social{ position: absolute; width:100%; min-width:20px; top:15px; right:1%; z-index:500; } .social img{ float:right; width:35px; display: block; padding:0 0 0px 15px; } img.move { bottom:0px; transition: transform 0.4s cubic-bezier(0.2, 1, 0.44, 1.2); } img.move:hover { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.4, 1.4, 1.4); } /*---------------------------- Menu ----------------------------*/ .menu{ position:absolute; width:100%; top:200px; z-index:401; } ul { margin: 0 auto; padding:0 0 5px 0; list-style-type: none; } li{ display: inline; list-style:none; padding:1%; transition: all 300ms; } li a{ color:#CCC; transition:300ms; } li a:hover { color:#900; } .menutxt{ text-align: center; font-family: 'Raleway', sans-serif; font-size:1.8vw; font-weight:400; z-index:300; } /*---------------------------- Image Fader ----------------------------*/ .fader { width:100%; z-index:1; } .fader img { position:absolute; width:100%; height:500px; max-height:1000px; min-height:200px; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } @keyframes faderFadeInOut { 0% { opacity:1; } 45% { opacity:1; } 55% { opacity:0; } 100% { opacity:0; } } .fader img.top { animation-name: faderFadeInOut; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 4s; animation-direction: alternate;*/ } /*---------------------------- Content ----------------------------*/ .contentwrap{ /* position: relative */ margin-top:500px; /* margin-top instead of top */ width:100%; z-index:500; background:#171717; /* height: 290px */ -moz-box-shadow: 0px -10px 20px 0px #000; -webkit-box-shadow: 0px -10px 20px 0px #000; box-shadow: 0px -10px 10px 0px #000; } .textwrap{ position:relative; width:100%; /* top: 40px */ padding-top:40px; /* added */ } /* clearfix */ .textwrap:after { content: ""; display: table; clear: both; } .content, .divider, .content2, .contentspace { text-align:center; float: left; } .divider{ /* height: 200px */ width: 24%; float: left; /* display:inline-block; */ margin: 0 1% 1% 0; } .divider img{ display: block; margin-left: auto; margin-right: auto; } .content, .content2 { /* height:200px; */ width: 15%; float: left; margin: 0 1% 1% 0; } .contentspace{ width: 20%; /* display:inline-block; */ margin: 0 1% 1% 0; } /*---------------------------- Footer ----------------------------*/ .footerwrap{ position:relative; /* top:460px; */ width:100%; z-index:501; clear:both; } .foottxt{ width:100%; height:26px; text-align: center; background:#333; font-family: 'Roboto', sans-serif; padding:15px 0; font-size:0.5em; /* typo vw */ color:#FFFFFF; font-weight:200; margin: 0; box-sizing: border-box; } 
 <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Home</title> <!--===================================================css links===================================================!--> <link href='http://fonts.googleapis.com/css?family=Raleway:600,500,400,200' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Roboto:400,700,900,100,300' rel='stylesheet' type='text/css'> <link href="test.css" rel="stylesheet" type="text/css" /> </head> <body> <!--===================================================Header===================================================!--> <div class="wrapper"> <div class="headerwrap"> <div class="social"> <a href="www.facebook.com"><img class="move" src="images/deviant.png"></a> <a href="www.facebook.com"><img class="move" src="images/yt.png"/></a> <a href="www.facebook.com"><img class="move" src="images/fb.png"/></a> </div><!--close social!--> <div class="header"> <div class="logo"> <img src="images/logo.png" /> </div><!--close logo--> </div><!--close header!--> <div class="menu"> <ul class="menutxt"> <li><a href="index.html">HOME</a></li> <li><a href="about.html">PORTFOLIO</a></li> <li><a href="manga.html">CONTACT</a></li> </ul> </div><!--close menu!--> </div><!--close headerwrap!--> <!--===================================================Fader===================================================!--> <div class="fadewrapper"> <div class="fader"> <img class="bottom" src="images/dsas.png"/> <img class="top" src="images/dsa.png"/> </div> </div> <!--===================================================Content===================================================!--> <div class="contentwrap"> <div class="textwrap"> <div class="contentspace"> </div><!--close contentspace!--> <div class="content"> <p>Specializations</p> <p>With various skills in branding, multi-media and advertising I am able to provide fresh and inspiring solutions for the task given to me. Using various programs such as:</p> </div><!--close content!--> <div class="divider"> <img src="images/divide.png"/> </div><!--close divider!--> <div class="content2"> <p>Why me?</p> <p>The work I create is reflecting something fresh and exciting in order to meet the clients needs. About pushing for new and innovative ideas and pushing for an end result of brand and product growth</p> </div><!--close content2!--> <div class="contentspace"> </div><!--close contentspace!--> </div><!--close textwrap!--> </div><!--close contentwrap!--> <!--===================================================Footer===================================================!--> <div class="footerwrap"> <p class="foottxt">Designed and developed by Luke Babich- All Rights Reserved ©2015</p> </div><!--close footerwrap!--> </div><!--close wrapper!--> </body> </html>
+1
source

Usually, when I have a complex site whose CSS I am trying to solve, I try to reduce complexity by playing with a simpler version of the site.

In this JSFiddle , I reproduced your contentwrap and footerwrap classes with some of the non-local parts removed (you will have to scroll down to see them due to the positioning set on them). As you can see, the footer overlaps the content due to the position: relative and top properties.

In this JSFiddle, the footer moves down as the content grows (check for yourself by changing the height property). To do this, I removed the position: relative , top and z-index properties.

+1
source

  • You do not need to place each block with position: relative; and position: absolute; . This violates the normal flow of content and the actual height of the content.

  • If you fix your positioning and get the normal height of your wrapper, you can make a sticky footer (if it has a fixed height). This footer will be at the very bottom of the page, despite the height of the content.

There is an example ( from CSS tricks ), there is a page with a footer with a height of 142px.

 * { margin: 0; } html, body { height: 100%; } .page-wrap { min-height: 100%; /* equal to footer height */ margin-bottom: -142px; } .page-wrap:after { content: ""; display: block; } .site-footer, .page-wrap:after { height: 142px; } .site-footer { background: orange; } 
 <div class="page-wrap"> Content! </div> <footer class="site-footer"> I'm the Sticky Footer. </footer>
0
source

More articles:


All Articles