My issue revolves around the spacing between three divs on a webpage, where the middle content div is consistently about 50px away from both the header and footer divs.
I'm puzzled as to why this separation keeps happening since I haven't defined any margins in the CSS files.
Amar
EDIT: Provided below is the snippet of code from the CSS file:
@-webkit-keyframes showBody{
from { opacity: 0; }
to { opacity: 1; }
}
body {
-webkit-animation: showBody 3s;
position: relative;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00CC00), to(#24C98D));
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
#links li {
list-style: none;
display: inline;
margin-right: 30px;
}
a {
text-decoration: none;
}
...
And here's the segment of code from the HTML file for reference:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="css/pagestyle.css" rel="stylesheet"/>
<link type="text/css" href="css/navmenustyle.css" rel="stylesheet" />
...
</div>
</div>
<div id="contentArea" style="clear: both;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra odio vel tellus tempus eget malesuada dui venenatis. In hac habitasse platea dictumst...</p>
</div>
<div id="footer">
<div id="footer-nav">
</div>
</div>
</body>
</html>