调整窗口大小时右div标签移动

Question

This is the website in question: http://co-project.lboro.ac.uk/users/cokl/Computifieds/index.php

I'm trying to make it so that the divs in the Topright shift to the left when you resize the window smaller. But for some reason it doesn't.

It works when I disable .wrapper3's width style but then the page is no longer being wrapped anymore.

I know this has probably simple answer but I can't seem to work it out. Thanks.

this is the code relating to it:

    <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>

And the css is:

    #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

For .wrapper3 setting a min-width and max-width might work to make it a variable size. I know IE has some issues with this, but there are workarounds.

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

Hope this helps.

Answer 2

You'll want to add the following CSS:

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

and then figure out what you want to do with the "pleas login" message.