Menu
Alright I have a simple header/content/footer css layout that i have used on other sites and worked fine. But for some reason this time while using it in a site to be made in HTML5 it isnt working quite right. When i just have the layout setup with no text or content it looks fine, the header, content, and footer areas bump up agaisnt each other like they should with no space between them. But as soon as i go into the content div(id=”body” in my css) and put a <p>(paragraph) in with some text, it makes the content section including the background image move down creating a space between it and the header? I dont know what to do… Below is my CSS and Html.
Heres the URL to the page, youll notice the space above the white content area that shows when i enter any text using a tag such as <p> or <h1>
[url]http://jason-storey.com/Smock-Etling/index.html
CSS–
html {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #1f4c65;
height: 100%;
padding: 0;
}
#container {
min-height:100%;
position:relative;
}
#header {
background-image:url(banner.png);
width:800px;
height:120px;
margin-left:auto;
margin-right:auto;
}
#body {
background-image:url(content.jpg);
width:800px;
height: 700px;
margin-left:auto;
margin-right:auto;
padding-bottom:60px;
/* Height of the footer
}
#footer {
margin-left:auto;
margin-right:auto;
bottom:0;
width:800px;
height:60px; /* Height of the footer
background-image:url(footer.jpg);
}
HTML–
<body>
<div id=”container”>
<header id=”header”>
</header>
<div id=”body”>
</div>
<footer id=”footer”>
</footer>
</div>
</body>
</html>