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;
}
/* ---------------------*/
Did you also try setting height for the iframe?
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