Hello everybody
I’m new to html and CSS.
I’m building a personal site all based on DIV’s and CSS
Right now I’m stuck with a major issue (for me at least) and I can’t move forward until I address this issue.
The issue is I need to center my site vertically and horizontally,
so it is always in dead center of page, no matter what the viewer does
(including full screen browser mode).
I have found much information on this subject and have tried at least 6 different ways, but I have not figured it out yet and it is driving me crazy
(been at it for 2 weeks).
Help!!!
Here is a site for reference :: BIG ISLAND LIVE ::
I would be sooooooooo very grateful if someone could look at my code and fix
and hopefully I’ll be able to reverse engineer your code and understand 
lol
now I did get close one time and I’ll paste the code
up after this 1st code to show my best attempt, I believe thanks goes to Paul ??? for the code and thread that pointed me in a decent direction.
here is the thread they I got the vertically and horizontal aligning code from
Easy Vertical Centering with CSS
ok here is my 1st code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<style type="text/css">
#wrapper {
padding: 0px;
height: 600px;
width: 998px;
float: left;
margin-right: auto;
margin-left: auto;
}
#logo {
padding: 0px;
height: 114px;
width: 998px;
background-color: #066;
float: left;
margin-right: auto;
margin-left: auto;
}
#nav {
padding: 0px;
background-color:#9C3
height: 31px;
width: 998px;
float: left;
background-color: #0C9;
margin-right: auto;
margin-left: auto;
}
#left_column {
background-color: #C6F;
float:left;
padding: 0px;
height: 383px;
width: 278px;
}
#right_content {
background-color: #663;
padding: 0px;
float: left;
height: 383px;
width: 164px;
}
#chat {
background:#0C3;
float:left;
padding:0;
height:383px;
width:556px;
}
#topslot {
background-color: #CC0;
padding: 0px;
float: left;
height: 191px;
width: 278px;
}
#bottomslot {
background-color: #CF9;
padding: 0px;
float: left;
height: 191px;
width: 278px;
}
#scrolling_text {
background-color: #666;
padding: 0px;
float: left;
height: 29px;
width: 998px;
text-align: center;
margin-right: auto;
margin-left: auto;
}
#copyright {
background-color: #930;
padding: 0px;
float: left;
height: 29px;
width: 998px;
text-align: center;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body
<div id="wrapper">
<div id="logo">logo </div>
<div id="nav">Navagation buttons go here 998 x 31</div>
<div id="left_column">
<div id="topslot">Content for top slot 278 x 191</div>
<div id="bottomslot">Content for bottom slot 278 x 191</div>
</div>
<div id="chat">center content 556 x 383</div>
<div id="right_content">right content 164 x 383 </div>
<div id="scrolling_text">.....Content for goes here...... 998 x 29</div>
<div id="copyright">Copyright goes here 998 x 29</div>
</div>
Content for id "wrapper" Goes Here</div>
</body>
</html>
ok heres the 2d code where I got close I think???
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal and vertical centerl</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html,body{
height:100%;
margin:0;
padding:0;
}
body{
background:#eae7d7 url(images/vert-centre.jpg) repeat-x center center;
text-align:center;
min-width:626px;
min-height:400px;
}
#vert-hoz{
position:absolute;
top:50%;
left:50%;
margin-top:-198px;/* half elements height*/
margin-left:-313px;/* half elements width*/
width:626px;
height:400px;
border:1px solid silver;
background:#666;
overflow:auto;/* allow content to scroll inside element */
text-align:left;
}
h1 {color:#fff;margin:0;padding:0}
<style type="text/css">
#wrapper {
padding: 0px;
height: 600px;
width: 998px;
float: left;
margin-right: auto;
margin-left: auto;
}
#logo {
padding: 0px;
height: 114px;
width: 998px;
background-color: #066;
float: left;
margin-right: auto;
margin-left: auto;
}
#nav {
padding: 0px;
background-color:#9C3
height: 31px;
width: 998px;
float: left;
background-color: #0C9;
margin-right: auto;
margin-left: auto;
}
#left_column {
background-color: #C6F;
float:left;
padding: 0px;
height: 383px;
width: 278px;
}
#right_content {
background-color: #663;
padding: 0px;
float: left;
height: 383px;
width: 164px;
}
#chat {
background:#0C3;
float:left;
padding:0;
height:383px;
width:556px;
}
#topslot {
background-color: #CC0;
padding: 0px;
float: left;
height: 191px;
width: 278px;
}
#bottomslot {
background-color: #CF9;
padding: 0px;
float: left;
height: 191px;
width: 278px;
}
#scrolling_text {
background-color: #666;
padding: 0px;
float: left;
height: 29px;
width: 998px;
text-align: center;
margin-right: auto;
margin-left: auto;
}
#copyright {
background-color: #930;
padding: 0px;
float: left;
height: 29px;
width: 998px;
text-align: center;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<div id="vert-hoz">
<div id="wrapper">
<div id="logo">logo </div>
<div id="nav">Navagation buttons go here 998 x 31</div>
<div id="left_column">
<div id="topslot">Content for top slot 278 x 191</div>
<div id="bottomslot">Content for bottom slot 278 x 191</div>
</div>
<div id="chat">center content 556 x 383</div>
<div id="right_content">right content 164 x 383 </div>
<div id="scrolling_text">.....Content for scrolling text goes here...... 998 x 29</div>
<div id="copyright">Copyright goes here 998 x 29</div>
</div>
Content for id "wrapper" Goes Here</div>
</div>
</div>
</body>
</html>
can anyone help please???