I'm facing an issue with my webpage design. I recently added a new div for the footer wrapper
(class = main_foot), but it's stuck in the top left corner.
Objective: Move the div beneath the div class="main_content"
I have verified that the element's class is correct in the style sheet and position tags, but it refuses to budge.
Hopefully, someone can help identify the problem.
It's the most recent div I inserted.
JS fiddle: http://jsfiddle.net/73mK8/1/
Header.php
<html>
<head>
<title> Crazy Fat Wrap* </title>
<link href="../CSS/nav.css" rel="stylesheet" type="text/css">
<link href="../CSS/normalize.css" rel="stylesheet" type="text/css">
<link href="../CSS/body.css" rel="stylesheet" type="text/css">
<link href="../CSS/stylesheet.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</head>
<body>
<div class="solid_banner">
<h1> Crazy Fat Wrap </h1>
...
<main_body content here>
...
</body>
</html>
stylesheet.css
.solid_banner {
width: 100%;
height: 70px;
...
}
.nav_bar {
...
}
.space {
...
}
...
.main_foot {
background: #ff7343;
position:absolute;
margin: 1915px 15% 0 !important;
width: auto;
height: 900px;
border-radius: 5px;
box-shadow: 0 0 5px black;
}