Lynob Lynob - 3 months ago 7
HTML Question

how to keep the footer down

this is the footer



#footer {
position: absolute;
width: 100%;
height: 10%;
margin-top: 1%;
bottom: 0px;
top: 99%;
}
#copyright {
float: left;
font: normal normal normal 12px/1.3em Arial, 'ms pgothic', helvetica, sans-serif;
color: #616060;
margin-left: 15%;
}
#linkedin {
float: right;
margin-right: 15%;
color: #043551;
font: normal normal normal 20px Arial, 'ms pgothic', helvetica, sans-serif;
}

<div id="footer">
<div id="copyright">
© 2016 copmpany
</div>
<div id="linkedin">
Follow us on
<a href="https://www.linkedin.com/">
<img alt="LinkedIn" src="http://i.imgur.com/DqA6suH.png">
</a>
</div>
</div>





This how it looks like. This how it should look like. I don't want to use
position:absolute
and I want to make it work on all screens, and all pages of the website. If i use absolute, then when I'm using the phone it will go down too much.

I have tried everything, including using
.container{ max-height:140%;}
and put the footer 99% that distance but didn't work, nothing worked. I can't use fixed position because on the services page that I linked to, the height goes to 130% on some screens.

Answer

This page will never work exactly the way you want it to because it isn't valid. You can only have one <!doctype html>, one <html>, one <head>, and one <body> on a page and in that particular order.

This is a waste of time until you fix that problem first. Run your page through this: VALIDATOR

<!doctype html>
<html>
<head>
   <!--<link>, <script>, <style>, <title>, <meta> are typically here.-->
</head>
<body>
    <!-- Your content <div>, <p>, <span>, etc. goes here.-->
</body>
</html>

Your page looks like this:

<!DOCTYPE html>
 <html>
 <head>
 <title>Services</title>
 </head>
 <body>
 <div class="index_wrapper">
 <!DOCTYPE html>
 <html>
 <head>
 <link rel="stylesheet" type="text/css" href="styles.css">
 <title></title>
 </head>
<body>

   <!------CONTENT------>

</body>
</html>

<div class="container">
<div class="service_title">
</div>

<table>
    <!--CONTENT INSIDE A TABLE LAYOUT WITH INLINE STYLES---->
</table>





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

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div id="footer">
<div id="copyright">
© 2016 Tycron Solutions
</div>
<div id="linkedin">
    Follow us on <a href="https://www.linkedin.com/company/tycron-solutions">
<img alt="LinkedIn" src="http://i.imgur.com/DqA6suH.png">
</a>

</div>
</div>
</body>
</html></div>
</body>
</html>