Why won't DIV position down on page 25%?

HTML & CSS
1

I am trying to get a div to position down the page. I also want the div to be center in the page. I for it to center in the page by selecting margin: 0; However, I can’t get the same container div to position down the page. Below is the css. It’s the div named container. Thanks for your help.

body {
background-image: url(images/background.jpg);
background-repeat: repeat;
background-attachment: fixed;
font-family: “Times New Roman”, Times, serif;
font-size: 14pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000;
border-top-width: 400px;
}

.container {
margin:auto;
width: 790px;
height: 650px;
float: none;
top: 25%;
}

.logoholder {
width: 790px;
}
.mainpagephoto {
width: 923px;

padding: 0px;
width: 790px;

}
.navigatestripe {
width: 790px;

font-family: "Times New Roman", Times, serif;
font-size: 18pt;
color: #FFF;
font-weight: normal;
font-variant: normal;
height: 44px;
text-align: center;
font-style: normal;
line-height: normal;
text-transform: none;
vertical-align: middle;
padding-top: 17px;

}
.mainpagetext {
font-family: “Times New Roman”, Times, serif;
font-size: 14pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #FFF;
width: 50%;
padding: 9px;

}
.ownerphoto {
float: right;
height: 315px;
width: 243px;

}
.copyrightnotice {
width: 790px;
font-family: “Times New Roman”, Times, serif;
font-size: 10pt;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-align: center;
color: #FFF;
line-height: normal;
text-transform: none;
position: relative;
}
.webdesigncreditfooter {
font-family: “Times New Roman”, Times, serif;
font-size: 12pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-align: center;
color: #FFF;
position: relative;
padding: 4px;
}

2

PLEASE! I really need help. How do I get this div container to stay in the center and position it down the page where I want it?
I would appreciate any help. Thanks.

SEE PAGE HERE

3

Add these declarations:


html{height:100%;}
body{min-height: 650px;}
.container {
position:relative; 
margin:-325px auto 0 auto;
float: none;
top: 50%;
}

hope that helps

4

That didn’t work. All it did was make the div container go flush to the right of the browser. :(.

5

Sigh… okay I got it about 5% down. But now I can’t get it centered. :frowning: I am new to CSS and I’m kind of thick. This is driving me crazy.

DRIVING ME CRAZY

6

Your link isn’t working for me. Is the site up?

7

Updated solution:

<!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=utf-8">
		<style type="text/css">
html, body{height:100%; padding:0; margin :0; min-height: 650px;}
body{ background: #555;     }
.container {
position:relative; 
margin:-325px auto 0 auto;
 float: none;
top: 50%;
height:650px;
width:650px; 
background: pink;
}	</style>
	</head>
	<body>
<div class="container">your page content</div>
	</body>
</html>

So you can see it in action. Make sure you aren’t overriding declarations and your rules aren’t conflicting with each other in your CSS.