Menu
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;
}
598
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.
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.
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.
html. < div id = "footer" >This is a footer. This stays at the bottom of the page.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
