How to divide footer and header included in php? - php

Question

I'm using a footer included in a php document, but it is going over the php page content.
Here is an example: http://screencast.com/t/L69p1gm2
And this is the code which I'm using:
<?php include 'header.php' ?>
<div class="kalendar">
<iframe class="kalendarframe" src="link to the calendar"&color=%23711616&ctz=Europe%2FBelgrade" style=" border:solid 1px #777 " width="100%" frameborder="0" scrolling="no"></iframe>
</div>
<?php include 'footer.php' ?>
I've tried to do something with css but without any positive results..
What could be a problem here?
Why is the footer going over the page?
Thanks
Here is the footer.php (which is empty):
<div id="footer">
</div>
</body>
</html>
And here is my css:
html, body{
background-color: #fff;
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
width:100%;
margin:0px 0px 0px 0px;
padding:0px;
position:absolute;
}
/* KOMPLETAN HEADER SA MENIJIMA */
header{
padding-top:0px;
text-align:;
height:40px;
margin-top:0px;
margin-left:-10px;
width:101%;
position:absolute;
top:0;
left:0;
background-color:#424242;
opacity:0.9;
position:fixed;
font-family: tahoma;
}
header .logout a{
margin-top: 0px;
padding-right:150px;
color:white;
text-transform:uppercase;
font-size: 14px;
float:right;
text-decoration:none;
font-family: 'Raleway', sans-serif;
}
/* -------------------------- MENI -----------------------*/
#menu{
width:960px;
color:#fff;
font-size:12px;
text-transform:uppercase;
margin: 0 auto;
}
#menu ul li {
display: inline;
}
#menu li a{
font-family: 'Raleway', sans-serif;
margin-right: 15px;
color:#fff;
text-transform:uppercase;
font-size: 14px;
text-decoration:none;
}
#menu li a:hover{
color: red;
text-decoration:none;
text-align: center;
}
/* -----------------------------------------------------------*/
/* WRAPPER SADRZAJ STRANICE */
#wrapper{
width:960px;
margin:0 auto;
}
#heading{
text-align:center;
}
#lijevi{
width: 635px;
float:left;
}
#desni{
width:310px;
float:right;
}
#mediaContacts{
float:left;
}
#smmSchedule{
float:right;
}
#calls{
float:left;
}
/*iframe{
border-radius: 15px;
aborder: 1px solid black;
-webkit-box-shadow: 2px 7px 81px -5px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 7px 81px -5px rgba(0,0,0,0.75);
box-shadow: 2px 7px 81px -5px rgba(0,0,0,0.75);
}*/
#table_button{
/*width:150px;
height:40px;
margin:0 auto;
opacity:0.9;*/
}
/* ---------------- FOOTER --------------*/
#footer{
margin-top:0px;
margin-left:-10px;
height:200px;
width:101%;
background-color: #000;
opacity:0.8;
}
/*---------------- RESPONSIVE DESIGN STYLING ------------------------*/
#media only screen and (min-width: 310px) and (max-width: 960px) {
body {
}
#wrapper{
width:310px;
height:1600px;
}
#heading{
margin:0 auto;
}
#lijevi{
width:310px;
}
#desni{
width:310px;
margin-left:0px;
float:none;
}
}
/* ---------------------------------------------------------------------*/
/* KALENDAR STYLING */
.kalendarframe{
height:1000px;
padding-top:80px;
/*margin-bottom:0px;*/
}
.kalendar{
width:100%;
height:1000px;
}
/* ---------------------*/

Answer 1

Try removing the div wrapper from around the include footer statement. You have the div's closing tag outside of the footers closing html tag. That may help

Answer 2

Did you also try setting height for the iframe?