This is a common request. However, I’m going out of my mind.
<style type="text/css">
html, body { height: 100%; margin:0px; padding:0px; }
#content { margin-left: 50%; margin-right: 50%; width:900px; }
</style>
…
<body style="min-height:100%; height:100%; position:relative;">
<header style="min-height:200px;">
<div style="height:50px; background:url(http://www.mydomain.com/images/bg.gif) repeat-x;"> </div>
<div style="height:300px; background:url(http://www.mydomain.com/images/bg2.jpg) repeat;">
<div class="content" style="height:300px; background:url(http://www.mydomain.com/images/masthead-back.jpg) no-repeat;">
<img alt="Hello" src="http://www.mydomain.com/images/logo.png" />
Welcome.
</div>
</div>
<div id="nav">
<ul class="navs">
<li><a href="Main.aspx">Home</a></li>
<li><a href="ContactUs.aspx">Contact</a></li>
<li><a href="AboutUs.aspx">About Us</a></li>
</ul>
</div>
</div>
</header>
<article class="content" style="padding-bottom:60px;">
This is the main content
</article>
<footer style="position:absolute; bottom:0px; width:100%; height:60px; background-color:black;">
<div class="content">
<a href='#'>Privacy</a> | <a href='#'>Terms of use</a>
</div>
</footer>
</body>
I want my header, artcle, and footer items to be centered within the body. But, I want the content within the header, article, and footer to be left-aligned. What am I doing wrong, everything is currently just left-aligned. However, its not centered within the screen.
You need a wrapper DIV with this CSS:
Working DEMO