Can someone please help me center this website (code included)

HTML & CSS
21

Where is that top margin?

22

Hi, Based on the code in post 15 you would add this;


/* set the width you want but its probably best to collect tablet sizes along the way as well*/ 
@media only screen and (max-width: 768px)  {
	#vertical{display:none}
}



<!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;
    min-width:998px;
    min-height:600px;
}
body {
    background:#eae7d7 url(images/vert-centre.jpg) repeat-x center center;
    text-align:center;
}
h1 {
    color:#fff;
    margin:0;
    padding:0
}
#wrapper {
    height: 600px;
    width: 998px;
    margin: auto;
    overflow:auto;
    clear:both;
    background:red;
    text-align:left;
}
#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;
}
#vertical {
    float:left;
    height:50%;
    margin-top:-300px;/* half vertical height*/
    width:100%;
}
@media only screen and (max-width: 768px)  {
	#vertical{display:none}
}

</style>
</head>
<body>
<div id="vertical"></div>
<div id="wrapper">
    <div id="logo">1.....................................................................................................................................................................................................................................................2</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>
</body>
</html>