CSS Logo position problem

Question

Hello
I have been recently working on a web project. In the project I have a css file Thats suppose to position the logo image.
This is the css code:
/** LOGO */
#logo {
width: 830px;
height: 90px;
margin: 0 auto;
margin-top: 10px;
margin-left: 200px;
background: url(images/img04.jpg) no-repeat left top;
Margin-top moves the logo down and margin-left moves the logo in alignment. The problem is that when I view the
page on different screen sizes margin-left makes the logo image automatically move to the middle of the page.
Instead of staying in the required position.
Can any one help.
Thanks.

Answer 1

Hi Thanks so much for the reply.
I want to add more information.
This is the css:
body {
    margin: 0;
    padding: 0;
    background: url(images/img01.jpg) repeat-x left top;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #66665E;
h1, h2, h3 {
    margin: 0;
    text-transform: uppercase;
    font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    font-weight: normal;
    color: #0C95C9;
h1 { font-size: 44px; }
h2 { font-size: 18px; }
h3 { }
p, ul, ol {
    margin-top: 0;
    line-height: 240%;
    text-align: justify;
ul, ol { }
blockquote { }
a { color: #0C95C9; }
a:hover { text-decoration: none; }
a img {
    border: none;
img.left {
    float: left;
    margin: 7px 30px 0 0;
img.right {
    float: right;
    margin: 7px 0 0 30px;
hr { display: none; }
.list1 {
.list1 li {
    float: left;
    line-height: normal;
.list1 li img {
    margin: 0 30px 30px 0;
.list1 li.alt img {
    margin-right: 0;
#wrapper {
/* Header */
#header-wrapper {
#header {
    width: 920px;
    height: 45px;
    margin: 0 auto;
/* Menu */
#menu {
    float: left;
    width: 640px;
    height: 45px;
#menu ul {
    margin: 0;
    padding: 10px 0px 0px 5px;
    list-style: none;
    line-height: normal;
#menu li {
    display: block;
    float: left;
#menu a {
    display: block;
    float: left;
    margin-right: 3px;
    padding: 3px 25px 2px 25px;
    text-decoration: none;
    text-transform: capitalize;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
#menu a:hover { text-decoration: underline; }
#menu .current_page_item a {
    height: 20px;
    background: #FEC200 url(images/img02.jpg) repeat-x left top;
    color: #FFFFFF;
#menu .first {
    background: none;
/* Search */
#search {
    float: right;
    width: 250px;
    height: 45px;
#search form {
    float: right;
    margin: 0;
    padding: 12px 30px 0 0;
#search fieldset {
    margin: 0;
    padding: 0;
    border: none;
#search input {
    float: left;
    font: 12px Georgia, "Times New Roman", Times, serif;
    border: none;
#search-text {
    width: 135px;
    height: 18px;
    padding: 3px 0 0 5px;
    border: 1px solid #333333;
    background: #ECF9E4;
    color: #000000;
#search-submit {
    height: 25px;
    margin-left: 10px;
    padding: 1px 10px;
    background: #C0C0C0 url(images/bg_grey.jpg);
    color: #000000;
/* Page */
#page {
    width: 920px;
    margin: 0 auto;
#page-bgtop {
    padding-top: 30px;
    /** LOGO */
#logo {
    width: 920px;
    height: 90px;
    margin: 0 auto;
    background: url(images/img04.jpg) no-repeat left top;
#logo h1, #logo p {
    margin: 0px;
    line-height: normal;
    text-transform: lowercase;
    font-weight: normal;
    color: #FFFFFF;
#logo p {
    text-transform: lowercase;
    font-size: 10px;
#logo h1 {
    padding-top: 54px;
    font-size: 34px;
#logo a {
    text-decoration: none;
    color: #FFFFFF;
/* Content */
#content {
    float: center;
    width: 920px;
    height: 800px;
    padding-top: 0px;
    padding-right: 0px;
/* Post */
.post {
    background: url(images/img07.jpg) repeat-x left bottom;
    margin-bottom: 25px;
.post .title {
    height: 30px;
    color: #549900;
.post .title a {
    text-decoration: none;
    color: #585D60;
.post .date {
.post .meta {
    margin-top: -10px;
    padding: 2px 30px 2px 16px;
    background: url(images/img03.gif) no-repeat left 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 10px;
    color: #66665E;
.post .meta span {
    display: block;
    margin-top: -10px;
.post .meta a { }
.post .entry {
    padding: 10px 0;
.post .links {
    margin: 0 250px 0 0;
    padding: 0 0 0 0px;
.post .links .comments {
.post .links .permalink {
    padding-left: 17px;
/* Sidebar */
#sidebar {
    float: left;
    width: 177px;
    padding-left: 22px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #585D60;
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
#sidebar li {
    margin-bottom: 30px;
    padding: 0 0 10px 0px;
#sidebar li ul {
#sidebar li li {
    margin: 0;
    padding: 7px 10px 10px 7px;
    background: url(images/img07.jpg) repeat-x left bottom;
#sidebar p {
    margin: 0;
    padding: 0px 10px;
#sidebar h2 {
    height: 26px;
    margin: 0 0 10px 0px;
    padding: 12px 0 2px 7px;
    text-transform: capitalize;
    font-size: 18px;
    font-weight: normal;
    color: #464F54;
#sidebar p {
    line-height: 200%;
#sidebar a {
    text-align: left;
    text-decoration: none;
    font-weight: normal;
    color: #585D60;
/* Calendar */
#calendar {
#calendar caption {
    padding-bottom: 5px;
    font-weight: bold;
#calendar table {
    width: 100%;
    border-collapse: collapse;
    border-bottom: 1px solid #24130F;
    border-left: 1px solid #24130F;
    border-right: 1px solid #24130F;
#calendar thead th {
    padding: 5px 0;
    text-align: center;
    border-top: 1px solid #24130F;
    border-left: 1px solid #24130F;
    background: #24130F;
#calendar tbody td {
    padding: 5px 0;
    text-align: center;
    border-top: 1px solid #24130F;
    border-left: 1px solid #24130F;
    border-bottom: 1px solid #24130F;
#calendar tfoot td {
    padding: 5px;
    border-left: 1px solid #24130F;
    border-bottom: 1px solid #24130F;
#calendar tfoot #next {
    border-top: 1px solid #24130F;
    text-align: right;
#calendar tfoot #prev {
    border-top: 1px solid #24130F;
#calendar .pad {
    border-bottom: 1px solid #24130F;
#calendar #today {
    background: #24130F;
/* Footer */
#footer {
    width: 920px;
    height: 49px;
    margin: 0 auto;
    padding-top: 50px;
#footer-bgcontent {
    margin: 0px;
    padding: 0px;
    height: 99px;
    background: #394144;
#footer p {
    margin: 0;
    text-align: center;
    line-height: normal;
    text-transform: uppercase;
    font-size: 10px;
    color: #FFFFFF;
#footer a {
    color: #E5FFC4;
This is the Mainpage:
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Uimodo</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="../style/style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery/jquery-1.4.3.min.js"></script>
</head>
<body>
<div id="wrapper">
    <div id="logo">
  </div>
  <hr />
    <!-- end #logo -->
    <div id="header">
      <div id="menu">
        <ul>
          <li><a href="Vidmin.php" class="first">Home</a></li>
          <li><a href="Other.php">Other</a></li>
        </ul>
      </div>
      <!-- end #menu -->
      <div id="search">
        <form method="get" action="">
          <fieldset>
            <input type="button" id="search-submit" onclick="window.location.href='now.php'" value="UPLOAD NOW" />
          </fieldset>
        </form>
      </div>
      <!-- end #search -->
  </div>
    <!-- end #header -->
    <!-- end #header-wrapper -->
    <div id="page">
    <div id="page-bgtop">
        <div id="content">
          <table width="920" border="0" align="center"  cellpadding="4">
            <tr>
              <td height="42" valign="top"><table width="415" height="41" align="right">
                <tr>
                  <td width="215" height="35" align="center"> </td>
                  <td width="60" align="center"><a href="" target="_blank"><img src="../Logo/fblogo.png" alt="" width="34" height="33" /></a></td>
                  <td width="124"><a href="" target="_blank"><img src="../Logo/twitlogo.png" alt="" width="34" height="33" /></a></td>
                </tr>
              </table></td>
            </tr>
            <tr>
              <td height="72" valign="top" align="center"><table width="859" height="72" border="0">
                <tr>
                  <td width="293" height="49"><div align="center"><font size="5" color="#333333">Signup</font></div></td>
                  <td width="14"> </td>
                  <td width="296"><div align="center"><font size="5" color="#333333">Login</font></div></td>
                </tr>
                <tr>
                  <td height="17"><div align="center" id="register"></div></td>
                  <td> </td>
                  <td><div align="center" id="loginstatus"></div></td>
                </tr>
              </table></td>
            </tr>
            <tr>
              <td height="269" valign="top" align="center"><table width="908" height="291" border="0" align="center" cellpadding="3" bgcolor="#CCCCCC">
                <tr>
                  <td width="401" height="287" align="center" valign="top"><form id="register_form" method="post" action="">
                    <table width="300" height="291" >
                      <tr>
                        <td height="23" colspan="2"> </td>
                        </tr>
                      <tr>
                        <td width="85" height="36"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Username :</font> <br />
                          </div></td>
                        <td width="203"><input name="realname" id="realname" type="text" size="30" value='<?Php echo $profile['displayName'];?>'/></td>
                        </tr>
                      <tr>
                        <td height="45"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Email :</font> <br />
                          </div></td>
                        <td><div align="left">
                          <input name="email" id="email" type="text" size="30" value='<?Php echo $profile['email'];?>'/>
                          <input name="propic" id="propic" type="hidden" size="30" value='<?Php echo $profile['photo'];?>'/>
                          </div></td>
                        </tr>
                      <tr>
                        <td height="81"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Security :</font> <br />
                          </div></td>
                        <td><div align="center"><img src="CaptchaSecurityImages.php?width=150&amp;height=40&amp;characters=8" alt="captcha"/></div>
                          <p>
                            <input name="security_code" id="security_code" type="text" size="30" />
                            </p></td>
                        </tr>
                      <tr>
                        <td height="45"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Password:</font> <br />
                          </div></td>
                        <td><div align="left">
                          <input name="password" id="password" type="text" size="30" />
                          </div></td>
                        </tr>
                      <tr>
                        <td height="45"> </td>
                        <td><div align="left">
                          <input type='submit' name="submit" id="submit" value='Sign Up'/>
                          </div></td>
                        </tr>
                      </table>
                    </form></td>
                  <td width="6" align="center"></td>
                  <td width="475" align="center" valign="top"><form method='post' id='login_form'>
                    <table width="300" height="176" >
                      <tr>
                        <td height="19" colspan="2"> </td>
                        </tr>
                      <tr>
                        <td height="36"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif" >Email :</font> <br />
                          </div></td>
                        <td><div align="left">
                          <input name='emailenter' type='text' id='emailenter'  size="25" />
                          </div></td>
                        </tr>
                      <tr>
                        <td height="45"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Password :</font> <br />
                          </div></td>
                        <td><div align="left">
                          <input name='passcode' type='password' id='passcode' maxlength='15' size="25" />
                          </div></td>
                        </tr>
                      <tr>
                        <td height="45"> </td>
                        <td><div align="left">
                          <input type='submit' name='submit' value='Login'/>
                          <a href="ForgotPassword.php">Forgot Password?</a></div></td>
                        </tr>
                      </table>
                    </form></td>
                </tr>
              </table></td>
            </tr>
            <tr>
              <td height="23" valign="top" align="center" > </td>
            </tr>
          </table>
</div>
        <!-- end #content -->
        <div style="clear: both;"> </div>
    </div>
    </div>
    <!-- end #page -->
    <div id="footer-bgcontent">
    <div id="footer">
        <p>Copyright (c) . </p></div>
    </div>
    <!-- end #footer -->
</div>
</body>
</html>
Please just focus on the logo div. It suddenly moves to the middle on different screen size etc. Hope you can help.