調整窗口大小時右div標簽移動

Question

這是有問題的網站： http : //co-project.lboro.ac.uk/users/cokl/Computifieds/index.php

我正在嘗試使其變小，以使Topright中的div向左移動。 但是由於某種原因，它不是。

當我禁用.wrapper3的寬度樣式但該頁面不再被包裝時，它可以工作。

我知道這可能是一個簡單的答案，但我似乎無法解決。 謝謝。

這是與此有關的代碼：

    <div id="Toppage">
    <div id="Header" class="wrapper3">

            <a href="index.php"><img style="float:left;" width="200" height="80"src="Images/logo.png"></a>

    <div id="Topright"><div class="nav" style=" margin-left: 17px; margin-top: 3px; font-size:16px;">Buy | Sell | My Account | Community | <a href="messages.php">Messages</a></div></div>



    <font style="float: right; display:block; clear:right; overflow:hidden; margin-top: 28px; font-size:12px;">

    <?php
    if(!isset($user_check))
    {echo 'Welcome, please <a href="login.php">login/register</a> to continue!';

    } else {
    echo 'Welcome '.$_SESSION['login_user'].'. To log out, please click <a href="logout.php">here</a>.';}
    ?>

    </font>
    <?php echo $getpmalert;?>
    </div>

</div>

CSS是：

    #Toppage{
background: url("Images/topback.png") repeat-x scroll left bottom #FFFFFF;

}

#Topmiddlepage{
background: url("Images/topmiddle.png") repeat-x scroll left bottom #FFFFFF;
}

#Header{
    height: 80px;

}

#Middleheader{
    height: 40px;
}

#Topright {
  background: url("Images/topright.png") repeat-x scroll left bottom #FFFFFF;
  color: #FFFFFF;
  float: right;
 width: 400px;
 height: 31px;
  overflow: hidden;
}

#Topright2 {
  float: right;
 width: 400px;
 height: 31px;
  overflow: hidden;
}

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -170px; /* the bottom margin is the negative value of the footer's height */
    position: relative;

    font-size: 0.9em;
    margin: 0 auto -170px;
    text-align: left;
}

.wrapper3{
width: 980px;
  margin: 0 auto;
  overflow: hidden;
}

.page {
  overflow: hidden;
  width: 100%;
}

Answer 1

對於.wrapper3，設置最小寬度和最大寬度可以使其可變大小。 我知道IE在這方面有一些問題，但是有解決方法。

http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml

希望這可以幫助。

Answer 2

您將要添加下面的CSS：

#Topright {
    position:fixed;
    top:0px;
    right:0px;
}

然后使用“請登錄”消息找出您要做什么。