Forum Moderators: not2easy
So I'm entirely self taught, and rusty all over. I'm brushing up on CSS and am learning how to use Div tags to layout my page.
One of the biggest issues I'm having, is that I want to design my site with a column that goes the entire way down the page - all centered. I was wondering what the best way is to do this.
Initially, I had div tag after div tag under each other all of the way down. However, my problem is that I can't have every div centered, 800 pixels wide, and positioned using absolute. Why do I want to use absolute? Because I want the first div to start at the very top of the page (0 pixels). I'm not sure how else to do it.
I've read several methods for centering div's on a page horizontally.....but how do I also start the first div at the top of the page?
Thank you for any help you guys can lend. :)
and a warm welcome to these forums. ;)
Take a look at this basic example, it should get you started...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
}
#container {
width:760px;
min-height:100%;
border-right:1px solid #003;
border-left:1px solid #003;
background-color:#eff;
margin:auto;
}
</style><!--[if lt IE 7]>
<style type="text/css">
#container {
height:100%;
}
</style>
<![endif]--></head>
<body><div id="container">
</div>
</body>
</html>
Not if but when you deal with IE you'll want to include a secondary style sheet per version using conditional comments [msdn.microsoft.com]. Simply set the margin of the block-level element (such as #container) in the second style sheet to correct IE. So long as you're using conditional comments you'll have all the browsers covered.
- John
I understand about the margins trick - very nice! However, will birdbrain's example as above begin container from the very top of the page?
