css - 调整窗口大小时右 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

希望这对您有所帮助。