cannot place footer at the bottom-center(page contains iframe)
I want to place footer at the bottom of the page, but it is always moving
to the left side. The left navigational div is absolute and the iframe is
floated right. Please help me how to move the footer at bottom-center of
the page.
Here is my code
HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">
<img id="logo" src="images/logo.png" alt="Orion Logo">
</div>
<div id="menu">
<ul>
<li><a href="about.html" target="content">About</a></li>
<li><a href="support.html" target="content">Support</a></li>
<li>Student Operation
<ul>
<li>Logging In</li>
<li>Creating Enquiry</li>
<li>Making Admission</li>
<li>Issuing Invoice</li>
<li>Issuing Kit</li>
</ul>
</li>
</ul>
</div>
<div id="frame">
<iframe id="content" name="content" src="about.html"></iframe>
</div>
<div id="footer">
<p>© 2013 Footer</p>
</div>
</body>
</html>
CSS
html {
height: 80%;
}
body {
margin: 0;
padding: 0;
height: 100%;
font-family: sans-serif;
font-size: 80%;
text-align: justify;
}
#header {
background-color: #f8651c;
padding-bottom: 3%;
margin: 0;
border: 0;
}
#logo {
margin: 10px 0 0 10px;
padding: 0;
border: 0;
}
#menu {
position: absolute;
margin: 0;
padding: 0;
border: 0;
width: 20%;
}
#frame {
float: right;
height: 100%;
width: 80%;
border-left: 2px solid #a2a2a2;
padding: 0;
margin: 0;
}
#content {
height: 100%;
width: 100%;
border: 0;
padding: 0;
margin: 0;
}
#footer {
position: absolute;
bottom: 0;
text-align: center;
}
No comments:
Post a Comment