Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Footer that moves with content

Tags:

html

css

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

I have gone through most of my code and removed positioning that is not needed, but if I try make it bottom 0 on the .footerwrap it floats somewhere randomly in the page. Hope you guys can help.

I'll link both my html and CSS so you can get an idea. Unfortunately, the site isn't live but it's 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;
}

like image 598
factordog Avatar asked Oct 31 '22 00:10

factordog

People also ask

How do I move the footer with the content html?

This is achieved by adding "clear:both" to the last child to the surrounding element. You can use . textwrap:after{content:""; display: table; clear: both;} like I did in the stylesheet or you can add a <div style="clear:both;"></div> as last element in . textwrap.

How do I make the footer hug at the bottom of the page?

To do this just remove margin top from footer and set margin top and bottom to auto margin: auto 0; on your main content (in my case article element) or margin: auto; to center it on both direction (vertically and horizontally) and it will make content align to center.

What are sticky footers?

A sticky footer pattern is one where the footer of your page "sticks" to the bottom of the viewport in cases where the content is shorter than the viewport height.

How do I keep the footer at the bottom when I scroll?

html. < div id = "footer" >This is a footer. This stays at the bottom of the page.

1 Answers

Aside from using position:absolute and position:relative, some of the elemts had a fixed height and couldn't grow with the content and the .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>
like image 88
mlv Avatar answered Nov 15 '22 06:11

mlv
Sign in to Comment

Related questions

element hover not working properly in css3 fade effects
How to call mfc C++ function in HTML JavaScript and how to call JavaScript Function in mfc C++? [closed]
Rails, how to submit disabled checkbox with true when checked
"Illegal character" in the jQuery library file, even without an invisible character or a missing quote anywhere
Detect Browser Language in PHP and set $locale accordingly
Positioning an image above another image in an email template
Wrong output when str_replace with acute ( ´ ) in utf-8 website [duplicate]
unable to scroll a container div element on chrome (Mobile Version)
Make an html button appear as text
adding items to <select> in IE5
How to add vendor prefixed gradients to an element with vanilla JavaScript? [duplicate]
Display progress bar while generating Excel file in php
Nivo Slider custom height/width problems
External file script is not loading
Is setting image dimensions via div img class the same as img class
Swagger ui url with parameters
Why are table borders not collapsing when caption is positioned?
Load more in php mysql and jquery
Skip hidden tab indexes
HTML, CSS & JS Animate Multiple Progress bars

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!